vue.的整理

1. vue ⽣命周期 ? 

1.1 什么是 vue ⽣命周期 ?

1.2 vue ⽣命周期都有哪些钩⼦函数 ? 这些钩⼦函数如何触发 ?

1.3 项⽬开发过程中 , 在⽣命周期⾥⾯都分别做过什么功能 ?

1.4 ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么 ?

⾯试官您好 , 我先介绍⼀下什么是 vue 的⽣命周期 ? 所谓的 vue ⽣命周期就是 vue 实例从创建到销毁的整个过程我们称之为 vue 的

⽣命周期 , 通过 vue 的⽣命周期我们可以在不同的阶段进⾏不同的逻辑操作 . vue ⽣命周期常⽤的钩⼦函数⼀共有 8 个 , 分别是创

建前后、挂载前后、更新前后以及销毁前后 . 分别对应的钩⼦函数为 beforeCreate 创建前、 created 创建后、 beforeMount 挂载

前、 mounted 挂载后、 beforeUpdate 更新前、 updated 更新后、 beforeDestory 销毁前、 destoryed 销毁后 , ⻚⾯⼀开始加载的

时候就会触发创建前后和挂载前后的钩⼦函数 , ⽽更新的钩⼦函数需要当我们改变 data 的时候才能触发 , ⽐如 点击按钮 , 执⾏⼀

个⽅法 , 在这个⽅式⾥⾯给 data ⾥⾯属性重新进⾏复制操作 , 这个时候就会更新的钩⼦函数 , 销毁的钩⼦函数必须得当组件进⾏

切换的时候就会进⾏销毁 .

在项⽬开发过程中 , 我经常使⽤到的钩⼦函数有 created, 我们经常在 created 进⾏数据请求 , 或者获取本地存储的数据 , 还有⼀些其

他的操作 . 除了 created 还有 mounted, 我们经常在 mounted ⾥⾯获取 dom 元素 ( 有时 候也存在获取不到 dom 元素的情况 , 这个时

候我们⼀般⽤ $nextTick ⽅法来解决 ). 以上就是我对⽣命周期的理解

2. vuex 的理解 ? 

2.1 什么是 vuex? 使⽤ vuex 能够解决什么问题 ?

2.2 vuex 的五⼤核⼼是什么 ?

2.3 在组件⾥⾯如何调⽤五⼤核⼼的属性和⽅法 ?

2.4 vuex 的执⾏机制是什么 ?

2.5 vuex 的弊端是什么 ? 怎么解决 ?

⾯试官您好 , 接下来我先给您介绍⼀下什么是 vuex? 所谓的 vuex 其实就是 vue 官⽅给我们提供的⼀个状态管理⼯具 , 通过 vuex 我

们可以组件之间数据共享的问题 . vuex ⼀共有 5 ⼤核⼼ , 分别是 state, ⾥⾯保存的是状态 , 也可以理解为是数组 , 接下来是 getters,

他们⽤来获取 state ⾥⾯的状态 , 并且可以对 state 的数据进⾏处理之后在返回 , 有点类似于 vue 的计算属性 , 接下来还有 mutations,

他的作⽤主要是⽤来修改 state ⾥⾯的数据 , 不过在 mutations ⾥⾯只能进⾏同步的操作 , 还有 actions, 这个 actions 也可以去改变

state 的状态 , 不过在 actions ⾥⾯定义的⽅法可以进⾏异步操作 , 最后⼀个是 modules, 如果当我们的项⽬⽐较⼤的时候 , 那么保存

的状态也会增加 , 如果都写到 index.js ⽂件⾥⾯ , ⽂件的内容就会变得特别臃肿 , 后期难以维护 , 所以我们可是使⽤ modules 进⾏模

块化的处理 , 将多个状态抽离到对应 js ⽂件⾥⾯ , 最后在 modules 进⾏合并 , 这样后期就⽅便维护了 .

接下来我在介绍⼀下在组件⾥⾯如何调⽤ vuex ⾥⾯的属性和⽅法 , 如果我们要获取 state ⾥⾯的状态 , 我们可以通过 this.

来进行获取 如果要调用

里面的方法 我们可以通过

来进行调用 如果要调用

里面的方法我们需要使用

store.commit 来触发 , 如果调⽤ actions ⾥⾯的⽅法 , 我们⼀般通过 this.$store.dispacth 来进⾏触发 . 除了这种⽅式以外 , 我们还可以

通过辅助函数的⽅式来进⾏调⽤和触发 (mapState, mapMutation,mapAction, mapGetter)

我在项⽬当中如果要改变 state 的状态 , 我们⼀般是在组件⾥⾯调⽤ this.$store.dispatch ⽅式来触发 actions ⾥⾯的⽅法 , 在 actions

⾥⾯的⽅法通过 commit 来调⽤ mutations ⾥⾯定义的⽅法来改变 state, 同时这也是 vuex 的执⾏机制 不过 vuex 也有⼀些弊端 , ⽐如浏览器刷新的时候 ,vuex 的数据会丢失 , 我们⼀般结合本地存储来解决 , 当我们在 mutations ⾥⾯改变

state 的时候在通过 localStorage 或者 sessionStorage 存储到本地 , 然后在 state 的状态的属性值那块写⼀个三元表达式 , 如果本地存

在数据的话则读取本地存储的数据 , 否则就赋值为 null

在项⽬当中我⼀般使⽤ vuex 会保存⽤户信息和 token 以及其他的⼀些状态 . 以上就是我对 vuex 的理解 .

3. vue 路由有⼏种模式 ? 有什么区别 ? 原理是什么 ?( 必问 ) 讲解

⾯试官您好 , 接下来我给您介绍⼀下 vue 的路由模式 ,vue 的路由模式⼀共有两种 , 分别是哈希和 history. 他们的区别是 hash 模式不

会包含在 http 请求当中 , 并且 hash 不会重新加载⻚⾯ , ⽽使⽤ history 模式的话 , 如果前端的 url 和后端发起请求的 url 不⼀致的话 , 会

报 404 错误 , 所以使⽤ history 模块的话我们需要和后端进⾏配合 .

history 的原理就是利⽤ html5 新增的两个特性⽅法 , 分别是 psuhState 和 replaceState 来完成的 . 以上就是我对 vue 路由模式的理解 .

4. vue 路由守卫 ?( 必问 ) 讲解⻚⾯权限

⾯试官您好 , 接下来我给您介绍⼀下 vue 路由守卫 , ⾸先呢 , 所谓的路由守卫就是当我们进⾏⻚⾯跳转的时候会触发的钩⼦函数 ,

我们把它称之为 vue 路由守卫 . vue ⼀共给我们提供了三种路由守卫 , 第⼀种全局路由守卫 , 第⼆种是组件内路由守卫 , 第三种路由

独享守卫 , 这个是写在路由⾥⾯ . 不管是全局 , 还是组件以及独享 , 都会有 beforeEach 、 beforeResolve 、 a"erEach 分别表示的意

思路由跳转前会触发的钩⼦函数以及进⼊路由的时候 , 以及进⼊路由之后会触发的钩⼦函数 . 这⼏个钩⼦函数⾥⾯都有⼀个回

调函数 , 这个回调函数⾥⾯会有三个参数 , 分别是 to,from,next, 分别对应的是要进⼊的路由、离开之前的路由 , 以及进⼊写⼀个路

由

在项⽬中我们经常使⽤路由守卫实现⻚⾯的鉴权 . ⽐如 : 当⽤户登录之后 , 我们会把后台返回的 token 以及⽤户信息保存到 vuex

和本地 , 当⻚⾯进⾏跳转的时候 , 我们会在路由守卫⾥⾯获取 vuex ⾥⾯的 token, 如果 token 存在的话 , 我们则使⽤ next 让他进⼊要

跳转的⻚⾯ , 如果 token 不存在的话我们使⽤ next ⽅法让他回到登录⻚

以上就是我对 vue 路由守卫的理解

5. v-if 与 v-show 的区别 ?

⾯试官您好 , 接下来我给您介绍⼀下 v-if 和 v-show 的区别 ? ⾸先 v-if 和 v-show 都是控制元素的显示与隐藏 , 不过 v-if 控制元素的显

示和隐藏的时候会删除对⽤的 dom 元素 , 当每⼀个显示的时候 , 都会重新创建 dom 和渲染 . ⽽ v-show 则是通过 css 的 display:none

和 display:block 来控制元素的显示与隐藏 . v-if ⽐较耗费性能 , 所以我们涉及到频繁的显示隐藏操作我们建议使⽤ v-show, 如果不

是频繁操作的话 , 我们可以 v-if

在项⽬中我会经常使⽤ v-if 和 v-show, ⽐如我们在搜索功能的时候 , 他有⼀个历史记录 , 这个时候我们根据是否有搜索的结果来判

断历史记录的显示与隐藏 , 这块我就可以使⽤ v-if , 当然⽤ v-show 也可以 . 以上就是我对 v-if 和 v-show 的理解 .

6. v-for 与 v-if 的优先级那个⾼ ? 如果同时使⽤ v-for 和 v-if 怎么解决 ? 讲解

v-for 的优先级⾼ . 因为 v-for 的时候我们才开始渲染 dom 元素 , 这个 v-if 还⽆法进⾏判断 .

v-for 和 v-if 不能同时使⽤ , 我们可以通过标签 , ⽐如 div 或者 template 标签来进⾏包裹 , 把 v-if 写到包裹的标签上⾯ ( 写到 v-for 外⾯ )

7. methods 、 computed 和 watch 的区别 ? 。讲解

⾸先呢 ,methods 是⽤来定义⽅法的区域 ,methods 定义的⽅法需要调⽤才能触发 . 不具备缓存⾏

⽽ computed 是计算属性 , 他依赖于属性值的变化 , 当属性发⽣改变的时候 , 计算属性⾥⾯定义的⽅法就会触发 ,computed 具有缓

存性 , 依赖属性值的变化⽽变化 .

⽽ watch 主要是⽤于监听 , 不具备被缓存性 . 依赖于数据变化⽽触发 .

在项⽬中 , ⽐如我们获取 state 的状态的时候我们会把它放到 computed ⾥⾯ , 或者在写购物⻋数量计算的时候也会使⽤计算属性 .

⽽ watch 也在项⽬经常使⽤ , ⽐如我们封装编辑 和 新增弹窗组件的时候会通过 watch 来进⾏ id 判断我们要显否要清空表单的数

据 . 以上就是我对 computed 和 watch 的理解 .

8. vue 组件通信 ? 。 eventBus 讲解

⽗传⼦ 在⼦组件的标签上定义属性 ⼦组件通过 props 来进⾏接受 , 可以通过数组的⽅式进⾏接受 , 也可以通过对象的⽅式来进

⾏接收 , 如果⽗组件没有传递属性 , ⼦组件可以 default 来设置默认值

⼦传⽗ ⼦组件通过 this.$emit(" ⾃定义的事件 ", 要传给⽗组件的数据 ), ⽗组件通过⼦组件的标签监听⾃定义的时间 , 通过⽅法来

接收传递的数据

⾮⽗⼦组件通信

通过中央事件总线 , 我们也称之为 eventBus,

我们需要创建⼀个空的 js ⽂件 , 在这个⽂件⾥⾯创建空的 vue 实例 , 然后导出这个空的 vue 实例 , 通过实例对象调⽤ .on ⽅法进⾏接

收 , 通过 emit ⽅法来进⾏发送 , 以上就是⾮⽗⼦组件通信的⽅式

9. $nextTick ⽅法有什么作⽤?

⾸先呢 ,

也叫做异步更新队列方法 而

方法的主要作用就是等待

元素加载完毕之后才会执行的回调函数 我们经常会在

nextTick ⽅法⾥⾯获取 dom 元素

10. 说⼀下什么是 mvvm 模式 ?

MVVM 是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel 。

View 的变化会⾃动更新到 ViewModel ， ViewModel 的变化也会⾃动同步到 View 上显示。这种⾃动

同步是因为 ViewModel 中的属性实现了 Observer ，当属性变更时都能触发对应的操作

11. vue 双向数据绑定原理

vue.js 则是采⽤ 数据劫持 结合 发布者 - 订阅者 模式的⽅式，

通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，

在数据变动时发布消息给订阅者，触发相应的监听回调。

这个时候就可以实现数据的双向绑定

12. vue 常⽤的指令有哪些 ?

v-if

v-show

v-html

v-text

v-on

v-bind

v-model

v-for

13. vue 常⽤的修饰符有哪些 ?

.trim 去除⾸尾多余的空格

.stop 阻⽌事件冒泡

.once 只渲染⼀次

.self 事件只作⽤在元素本身

.number 将值转化为 number 类型

.capter 组件之间捕获

.prevent 阻⽌元素的默认⾏为

.native 事件穿透 , 让我们可以在⾃定义组件上定义事件和⽅法

14. vue 如何封装可复⽤的组件 ? 以及请举例说明你封装过的组件 ?

1. 分析项⽬的所有⻚⾯结构和业务功能 , 抽离出相同的⻚⾯结构和业务功能

2. 在 src ⽬录下创建⼀个 components 这个的⽂件夹

3. 在这个⽂件夹内创建可复⽤的组件

4. 在需要的⽤的组件⾥⾯引⼊创建的这个可复⽤的组件 , 并进⾏注册 , 以标签的形式写在对应的地⽅

5. 接下来就需要对可复⽤的组件内容要进⾏封装 , 那么在封装的时候我们要注意组件的封闭性和开放性以及粗细粒度

6. 所谓的这个封闭性就是当我们在组件内部定义好之后外部是⽆法进⾏修改的 , ⽐如当前有⼀个关闭的符号 , 或者有⼀个箭

头 , 我们需要不管任何⼈使⽤该组件时候都能够显示这个箭头 , ⽆法从外部进⾏修改

7. 所谓的开放性就是我们需要将动态的内容以及组件通信的⽅式进⾏数据传递 , 保证组件的可扩展性

8. ⽽所谓的粗细⼒度就是我们可以把⼀整个⻚⾯当作⼀个组件去进⾏封装 , 也可以⼀个⻚⾯包含了多个组件 , ⾄于到底选择

哪种呢 , 这个是没有⼀个标准的 , 我们需要根据⾃⼰的业务需求去进⾏判断

9. 总结来说 , 所谓的如何封装可复⽤组件其实技术核⼼就是通过我们 vue 提供的组件通信在结合 slot 插槽来进⾏分装

10. ⽐如 : 封装⼀个搜索框组件 :

1. 在 components ⾥⾯创建 search.vue

2. 在 search.vue ⾥⾯实现搜索框的布局

3. 在 props ⾥⾯接受 title, bgColor, size , icon, 以及当点击搜索按钮或者点击回⻋键的时候 , 触发⼀个⽅法 , 通过

this.$emit 将输⼊框输⼊的值传递给⽗组件

4. 接下来要使⽤这个搜索组件 , 我们需要通过 import 在⽗组件内引⼊⼦组件 , 并在 componetns 属性⾥⾯进⾏注册 ,

5. 在⻚⾯就可以使⽤ , 这个时候我们可以通过传递 titile ⽼控制⼦组件搜索框显示的内容 , 通过 bgcolor 可以控制搜索框

的背景颜⾊ , 也可以通过 size 设置搜索框字体的⼤⼩ , 也可以通过 icon 来设置搜索框的图标 , 通过监听 $emit ⾥⾯定义

的⽅法来获取搜索框输⼊的值

以上就是封装的过程

15. vue 中 key 的作⽤是什么 ?

避免 dom 元素重复渲染 . 我⻔⼀般在设置 key 的时候⾸先尽量会设置为 id, 或者 index 下表 .

16. 说⼀下你对 keep-alive 的理解 ? 以及在项⽬中如何使⽤ ?

keep-alive 是 vue 内置的⼀个组件，⽽这个组件的作⽤就是能够缓存不活动的组件，我们能够知道，⼀般情况下，组件进⾏切

换的时候，默认会进⾏销毁，如果有需求，某个组件切换后不进⾏销毁，⽽是保存之前的状态，⽐如说刚刚填好的表单数

据。那么就可以利⽤ keep-alive 来实现 在搭建 vue 项⽬时，有某些路由组件没必要多次渲染，所以需要将组件在内存中进⾏ ‘ 持久化 ’ ，此时在 router-view 上使⽤

keep-alive 。 keep-alive 可以使被包含的路由组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下

⼀次显示时，也不会重新渲染。

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会

被缓存。 max- 数字最多可以缓存多少组件。

以上就是我对 keep-alive 的理解

17. 说⼀下什么是 vue 过滤器 ? 有⼏种 ? 项⽬中如何使⽤ , 请举例说明 ?

所谓的 vue 过滤器就是将数据进⾏⼆次处理 , 得到我们想要的结果数据

vue 的过滤器分为两种 , 第⼀种是全局过滤器 , 通过 vue.filet 来进⾏定义 , 第⼆种是局部过滤器 , 需要定义在组件内部

项⽬中我们通过过滤器将后台返回的状态 0 和 1 转化为⽀付或者未⽀付

18. 说⼀下你对 slot 插槽的理解 ?

⾸先呢 , 所谓的插槽就是⼀个占位符 , 将⾃定义组件的内容展示出来 . 我们知道⾃定义的组件⾥⾯如果写内容的话 , ⻚⾯是不会显

示出来的 , 如果我们想让⾃定义组件⾥⾯的内容显示出来 , 我们就需要使⽤ slot 的插槽 .

⽽插槽分别具名插槽和匿名插槽、以及作⽤域插槽 . 我们⽤的⽐较多的具名插槽和匿名插槽 , 具名插槽需要所有 slot 标签上指定

name 属性 , ⽽在对应标签上添加 v-slot 属性 .

在项⽬中我们⼀般在进⾏组件封装的时候会使⽤插槽 , 以上就是我对插槽的理解 .

19. 说⼀下 vue 中本地跨域如何解决 ? 线上跨域如何解决 ?

本地跨域是通过在 vue.config.js ⽂件⾥⾯的 devServer 属性⾥⾯的 proxy 属性⾥⾯配置 , ⼀共配置三个属性 , 分别是代理名称 代理

地址 开启跨域 重写路径

线上跨域是在 nginx.conf ⽂件⾥⾯配置 , 代理名称是通过 location 代理名称。 proxy_pass 代理地址

20. 说⼀下如何对 axios 进⾏⼆次封装 ? 以及 api 如何封装 ?

1. 在 src ⽂件夹内创建 utils ⽂件夹

2. 在 utils ⽂件夹内创建 request.js ⽂件

3. 在 request.js 内引⼊ axios

4. 使⽤ axios.create ⽅法创建 axios 的实例 , 在 axios.create ⽅法⾥⾯可以配置请求的公共地址和超时时间以及其他的⼀些配置

5. 在创建请求拦截器和响应拦截器

6. 在请求拦截器⾥⾯可以获取 vuex 的 token, 并通过 config.header.token = vuex 的 token, 将 token 发送给后台

7. 在请求拦截器⾥⾯我们配置 loading 加载

8. 在响应拦截器⾥⾯我们可以结束 loading 加载以及 token 的过期处理 , 以及错误响应信息的处理

9. 最后通过 export default 导出 axios 的实例对象

10. 在 src ⽂件内创建 api ⽂件夹

11. 在 api ⽂件夹内创建对应模块的 js ⽂件

12. 在对应的⽂件⾥⾯引⼊ request.js ⽂件

13. 封装 api ⽅法

14. 最后通过 export default 导出封装的 api ⽅法 21. 说⼀下 axios 的拦截器的作⽤ ? 应⽤场景都有哪些 ?

⾸先呢 ,axios 拦截器是 axios 给我们提供的两个⽅法 , 通过这两个⽅法我们可以对请求发送之前以及响应之后进⾏逻辑的再次处

理 ( 拦截 ). 这两个拦截器不需要⼿动触发 , 只要发送 http 请求的时候就会⾃动触发 . 我在项⽬中经常通过拦截器发送 token, 对

token 进⾏过期处理 , 以及进⾏其他的⼀些操作

22. 说⼀下 vue 和 jquery 的区别 ?

⾸先呢 jquery 他是⽤ js 封装的⼀个类库 , 主要是为了⽅便操作 dom 元素 , ⽽ vue 他是⼀个框架 , 并且呢 , 他会从真实 dom 构建出⼀个

虚拟的 dom 树 , 通过 di! 算法渲染只发⽣改变的 dom 元素 , 其他的相同的 dom 元素不⽤在重新渲染 . ⽽使⽤ jquery 去改变 dom 元素

的时候 , 即使有相同的 dom 元素也会重新渲染 , 以上就是我对 vue 和 jquery 区别的理解 .

23. vue 中 data 发⽣变化 , 视图不更新如何解决 ?( 必问 ) 过⼀下

⾯试官 , 您好 , 接下来我先给您介绍⼀下为什么 data 发⽣变化 , 视图不更新 , 因为 Vue 实例中的数据是响应式的 * * ⽽我们新增的属

性并不是响应式的，由于受现在 JavaScript 的限制， Vue ⽆法检测到属性的新增或删除。所以有时⽆法实时的更新到视图上。

**

所以我在项⽬中遇到这类问题的时候⼀般是通过 this.

方法去解决

$set ⽅法⼀共有三个参数 , 分别是⽬前属性 , 新增属性 ,

新增的值 .

以上就是我对视图不更新的理解 .

24. 为什么 vue 中 data 必须是⼀个函数 ?( 必问 ) 过⼀下

如果 data 是⼀个函数的话，这样每复⽤⼀次组件，就会返回⼀份新的 data ，类似于给每个组件实例创建⼀个私有的数据空

间，让各个组件实例维护各⾃的数据。⽽单纯的写成对象形式，就使得所有组件实例共⽤了⼀份 data ，就会造成⼀个变了全

都会变的结果。

所以说 vue 组件的 data 必须是函数。这都是因为 js 的特性带来的，跟 vue 本身设计⽆关。

25.MVVM 模式的优点以及与 MVC 模式的区别 ?

MVVM 模式的优点：

1 、低耦合： 视图（ View ）可以独⽴于 Model 变化和修改，⼀个 ViewModel 可以绑定到不同的 "View" 上，当 View 变化的时候 Model

可以不变，当 Model 变化的时候 View 也可以不变。

2 、可重⽤性： 你可以把⼀些视图逻辑放在⼀个 ViewModel ⾥⾯，让很多 view 重⽤这段视图逻辑。

3 、独⽴开发： 开发⼈员可以专注于业务逻辑和数据的开发（ ViewModel ），设计⼈员可以专注于⻚⾯设计。

4 、可测试： 界⾯素来是⽐较难于测试的，⽽现在测试可以针对 ViewModel 来写。

MVVM 和 MVC 的区别：

mvc 和 mvvm 其实区别并不⼤。都是⼀种设计思想。

主要区别

mvc 中 Controller 演变成 mvvm 中的 viewModel ，

mvvm 通过数据来显示视图层⽽不是节点操作。

mvvm 主要解决了 :

mvc 中⼤量的 DOM 操作使⻚⾯渲染性能降低，加载速度变慢，影响⽤户体验。 26. 怎样理解 Vue 的单向数据流 ?

数据总是从⽗组件传到⼦组件，⼦组件没有权利修改⽗组件传过来的数据，只能请求⽗组件对原始数据进⾏修改。这样会防⽌从

⼦组件意外改变⽗级组件的状态，从⽽导致你的应⽤的数据流向难以理解。

注意：在⼦组件直接⽤ v-model 绑定⽗组件传过来的 prop 这样是不规范的写法 开发环境会报警告

如果实在要改变⽗组件的 prop 值 可以再 data ⾥⾯定义⼀个变量 并⽤ prop 的值初始化它 之后⽤ $emit 通知⽗组件去修改

27. 虚拟 DOM 是什么 ? 有什么优缺点 ?

什么是虚拟 dom?

由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM ，会产⽣⼀定的性能问题 . 所以在 vue 中将真实的 DOM 节点抽离成⼀个虚拟

的 DOM 树 , 这个虚拟的 DOM 树就是虚拟 DOM.

优点 :

保证性能下限：

框架的虚拟 DOM 需要适配任何上层 API 可能产⽣的操作，它的⼀些 DOM 操作的实现必须是普适的，所以它

的性能并不是最优的；但是⽐起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM ⾄少可以保证在你不需要⼿动优化的

情况下，依然可以提供还不错的性能，即保证性能的下限；

⽆需⼿动操作 DOM ：

我们不再需要⼿动去操作 DOM ，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向

绑定，帮我们以可预期的⽅式更新视图，极⼤提⾼我们的开发效率；

跨平台：

虚拟 DOM 本质上是 JavaScript 对象 , ⽽ DOM 与平台强相关，相⽐之下虚拟 DOM 可以进⾏更⽅便地跨平台操作，例如

服务器渲染、 weex 开发等等。

缺点 :

⽆法进⾏极致优化：

虽然虚拟 DOM + 合理的优化，⾜以应对绝⼤部分应⽤的性能需求，但在⼀些性能要求极⾼的应⽤中虚拟

DOM ⽆法进⾏针对性的极致优化。

⾸次渲染⼤量 DOM 时，由于多了⼀层虚拟 DOM 的计算，会⽐ innerHTML 插⼊慢

28. Vue 的 di! 算法原理是什么？

Vue 的 di! 算法是平级⽐较，不考虑跨级⽐较的情况。内部采⽤深度递归的⽅式 + 双指针⽅式⽐较

先⽐较两个节点是不是相同节点

相同节点⽐较属性，复⽤⽼节点

先⽐较⼉⼦节点，考虑⽼节点和新节点⼉⼦的情况

优化⽐较：头头、尾尾、头尾、尾头

⽐对查找，进⾏复⽤

29. 组件写 name 有啥好处？

增加 name 属性，会在 components 属性中增加组件本身，实现组件的递归调⽤。

可以表示组件的具体名称，⽅便调试和查找对应的组件。