8 Vue 面试题 复习（SY）

目录

1 v-show和v-if的 区别

2 为何要在v-for中使用key

 6 双向数据绑定v-model 的实现原理

7 对MvvM的理解

8 computed有何特点

9 为什么data是一个函数？

10 ajax 请求放在哪个生命周期：

11 如何将所有props传递给子组件

12 如何自己实现V-model

13 多个组件相同逻辑，如何抽离

14 何时要使用异步组件

15 何时需要使用keep-alive

16 何时需要用beforeDestroy

17 什么是作用域插槽

18 vuex中action和mutation的区别

19 vue-router常用路由模式

20  如何配置Vue-router异步加载

21 请用 vnode 描述一个 DOM 结构：

 22 监测 data 变化的核心 API 是什么：

23  Vue如何监听数组变化 

24 请描述响应式原理 

25 diff算法的时间复杂度

26  简述diff算法过程

27  Vue为何是异步渲染，$nextTick何用？

28 Vue常见性能优化方式

---

1 v-show和v-if的 区别

v-show是通过css display控制显示和隐藏

v-if 是组件真正的渲染和销毁，而不是显示隐藏

频繁切换显示状态的用v-show，否则用v-if

2 为何要在v-for中使用key

1. 主要为了更高效地更新虚拟dom，就是说：

2. 有了key之后，可以根据key快速的找到新Vnode对应的旧Vnode进行更新值。

3. 在更新数据时，可以减少dom渲染次数，提升渲染性能。

记住：diff算法中会通过key和tag来判断，新旧vnode是否是 sameNode

diff算法：

当页面的数据发生变化时，Diff算法只会比较同一层级的节点：

如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。

如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。

3 描述vue组件生命周期（父子组件）。略

4 vue组件如何 通讯：

1. 父子组件：子组件用this.$emit触发事件，父组件在引入子组件的地方用props接收该事件

2. 兄弟组件，用自定义事件。定义event.js，event.$emit event.$on 销毁组件时 event.$off 清除事件

3. vuex

5 描述组件渲染和更新过程

​

 6 双向数据绑定v-model 的实现原理

input 元素的value = this.name

绑定input事件this.name = $event.target.value

data更新触发re-render 

7 对MvvM的理解

对应代码那些地方

8 computed有何特点

缓存，data不变不会重新渲染

提高性能

9 为什么data是一个函数？

组件是一个class，使用组件时，是对组件的实例化。假如data是一个

对象的话，多个实例化的组件就引用同一个对象，导致组件间的数据互相引用。

所以为了实例化后的每个组件的data互不影响，data要使用函数。数据在闭包中了。

10 ajax 请求放在哪个生命周期：

mounted。

JS是单线程的，先dom加载完成，再ajax请求数据，逻辑比较清晰。

在mounted前加载没有意义。

11 如何将所有props传递给子组件

$props

<User v-bind=“$props”/>

12 如何自己实现V-model