前端八股文（vue篇）

目录

一.谈一谈对MVVM的理解？

二.解释一下对Vue生命周期的理解

三.说一下router与route的区别

四.VueRouter有哪几种导航守卫？

五.  Vue的路由两种模式hash模式和history模式的实现原理

六.说一下v-if与v-show的区别

七.vue为什么采用异步渲染

八.组件中写name选项有哪些好处？

九.keep-alive的实现原理是什么

十.说一下Vue SSR实现原理

---

一.谈一谈对MVVM的理解？

• MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。
• Model层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
• View代表UI组件，他负责将数据模型转换为UI展现出来，View是一个同步View和Model的对象。
• 在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。
• 对于ViewModel通过双向数据绑定把View层和Model层连接了起来，而ViewheModel之间的同步工作完全是自动的，无需人为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理、

---

二.解释一下对Vue生命周期的理解

• 什么是vue生命周期
• vue生命周期的作用是什么？
• vue生命周期有几个阶段
• 第一次页面加载会触发哪几个钩子
• DOM渲染在哪个周期就已经完成
• 多组件（父子组件）中生命周期的调用顺序

1.什么是vue生命周期

对于vue来说，生命周期就是一个vue实例从创建到销毁的过程。

2.vue生命周期的作用是什么

生命周期的过程中会运行着一些叫做生命周期的函数，给予了开发者在不同的生命周期阶段添加业务代码的能力。

其实和回调一个概念，当系统执行到某处时，检查是否含有hook（钩子），有的话就是执行回调。

通俗的说，hook就是在程序中运行，在某个特定的位置，框架的开发者设计好了一个钩子来告诉我们当前程序已经运行到特定的位置了，会触发一个回调函数，并提供给我们，让我们可以在生命周期的特定阶段进行相关业务代码的编写。

3.vue生命周期有几个阶段

他可以分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

• beforeCreate：是new Vue()之后触发的第一钩子，在当前阶段data,methods,computed以及watch上的数据和方法都不能被访问。
• created：在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与DOM进行交互，如果非要想，可以通过vm.$nextTick来访问DOM、
• beforeMount：在挂载之前，在这之前template模板已经导入渲染函数编译。而当前阶段虚拟DOM已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。
• mounted：在挂载完成后发生，当前阶段，真实的DOM挂载完毕，数据完成双向绑定，可以访问DOm节点，使用$refs属性对DOM进行操作。
• beforeUpdate：发生在更新之前，也就是响应式数据发生更新，虚拟DOM重新渲染之前被触发，你可以在当前阶段更改数据，不会造成重渲染。
• updated：发生在更新完成之后，当前阶段组件DOM已经完成更新。要注意的是避免在此期间更改数据，因为这可能导致无限循环的更新。
• beforeDestory：发生在实例销毁之前，在当前阶段实例完全可以使用，我们可以在这时进行善后收尾工作，比如去除计时器。
• destoryed：发生在实例销毁之后，这个时候只剩下DOM空壳。组件已被拆解，数据绑定被卸除，监听别移除，子实例也别销毁。

第一次页面加载会触发哪几个钩子

会触发4个钩子，分别是：beforeCreate，created，beforeMount，mounted

DOM渲染在哪个周期就已经完成

DOM渲染是在mounted阶段完成，此阶段真实的DOM挂载完毕，数据完成双向绑定，可以访问到DOM节点。

多组件（父子组件）中生命周期的调用顺序

组件的调用顺序都是先父后子，渲染完成的顺序是先子后父。组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

---

三.说一下router与route的区别

$route对象表示当前的路由信息，包含了当前URL解析得到的信息。包含当前的路径，参数，query对象等。

• $route.path:字符串，对应当前的路由路径，总是解析为绝对路径，如"/foo/bar"。
• $route.params:一个key/value对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
• $route.query：一个key/value对象，表示URL查询参数。例如对于路径"/foo?user=1"，则有$route.query.user==1，如果没有查询参数，则是一个空对象。
• $route.hash:当前路由的hash值（不带#），如果没有hash值，则为空字符串。
• $route.fullPath:完成解析后的URL，包含查询参数和hash的完整路径。
• $route.matched:数组，包含当前匹配的路径中所包含的所有片段对应的配置参数对象。
• $route.name:当前路径名字
• $route.meta:路由元信息

$route对象出现在多个地方：

• 组件内的this.$route和route watcher回调（监测变化处理）
• router.match(location)的返回值
• scrollBehavior方法的参数
• 导航钩子的参数，例如router.beforeEach导航守卫的钩子函数中，to和from都是这个路由信息对象。

$router对象是全局路由的实例，是router构造方法的实例。

$router对象常用的方法有：

• push：向history栈添加一个新的记录
• go：页面路由跳转前进或者后退
• replace：替换当前的页面，不会向history栈添加一个新的记录

---

四.VueRouter有哪几种导航守卫？

• 全局前置/钩子：beforeEach，beforeResolve,afterEach
• 路由独享的守卫：beforeEnter
• 组件内的守卫：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave

---

五.  Vue的路由两种模式hash模式和history模式的实现原理

后面hash值的变化，不会导致浏览器向服务器发出请求，浏览器不发请求，就不会刷新页面；通过监听hashchage事件可以知道hash发生了哪些变化，然后根据hash变化来实现更新页面部分内容的操作。

history模式的实现，主要是HTML5标准发布的两个API了，pushState和replaceState,这两个API

可以在改变URL，但不会发送请求，这样还可以监听URl变化来实现更新页面部分内容的操作。

两种模式的区别：

• 首先是在URL展示上，hash模式有"#"，history模式没有
• 刷新页面时，hash模式可以正常加载到hash值对应的页面，而history没有处理的话，会返回404，一般需要后端将所有页面都配置重定向到首页路由
• 在兼容性上，hash可以支持低版本浏览器和IE

---

六.说一下v-if与v-show的区别

共同点：都是动态显示DOM元素

区别点：

1. 手段

v-if是动态的向DOM树内添加或者删除DOM元素

v-show是通过设置DOM元素的display样式属性控制显隐

     2.编译过程

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

v-show只是简单的基于css切换

      3.编译条件

v-if是惰性的，如果初始条件为假，则什么也不做，只有在条件第一次变为真时才开始局部编译。

v-show是任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留

       4.性能消耗

v-if有更高的切换消耗

v-show有更高的初始渲染消耗

        5.使用场景

v-if使用运营条件不大可能改变

v-show适合频繁切换

---

七.vue为什么采用异步渲染

因为如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染；所以为了性能考虑，vue会在本轮数据更新后，再去异步更新视图。

异步渲染的原理：

1. 调用notify()方法，通知watcher进行更新操作
2. 依次调用watcher的update方法
3. 对watcher进行去重操作（通过id）放到队列里
4. 执行完后异步清空这个队列，nextTick进行批量更新操作

---

八.组件中写name选项有哪些好处？

1. 可以通过名字找到对应的组件（递归组件：组件自身调用自身）
2. 可以通过name属性实现缓存功能（keep-alive）
3. 可以通过name来识别组件（跨级组件通信时重要）
4. 使用vue-devtools调试工具里显示的组件名称是由vue中的name决定的

---

九.keep-alive的实现原理是什么

keep-alive组件是vue的内部组件，用于缓存内部组件实例。这样做的目的是在于，keep-alive内部的组件切回时，不用重新创建组件实例，而直接使用缓存中的实例，一方面能够避免创建实例带来的开销，另一方面可以保留组件的状态。

keep-alive具有include和exclude属性，通过他们可以控制哪些组件进入缓存。另外它还提供了max属性，通过它可设置最大缓存数，当缓存的实例超过该数时，vue会移除最久没有使用的组件缓存。

---

十.说一下Vue SSR实现原理

• app.js作为客户端与服务端的公用入口，导出Vue根实例，供客户端entry与服务端entry使用。客户端entry主要作用挂载到DOM上，服务端entry除了创建和返回实例，还需要进行路由匹配与数据预获取。
• webpack为客户端打包一个ClientBundle，为服务端打包一个ServerBundle
• 服务器接收到请求时，会根据url，加载相应的组件，获取和解析异步数据，创建一个读取Server Bundle的BundleRenderer，然后生成html发送给客户端。
• 客户端混合，客户端收到服务端传来的DOM与自己生成的DOM进行对比，把不同的DOM激活，使其可以响应后续变化，这个过程叫做客户端激活（也就是转换为单页应用）。为确保混合成功，客户端与服务器端需要共享一台数据。在服务器端，可以在渲染之前获取数据，填充到store里，这样，在客户端挂载到DOM之前，可以直接从store里面取数据。首页的动态数据通过window.INITIAL_STATE发送到客户端
• VueSSR的原理，主要就是通过vue-server-renderer把Vue组件输出成一个完整的HTML，输出到客户端，到达客户端重新展开为一个单页应用。

---