Vue面试题整理

01.Vue常用的组件通信方式有哪些？

题目分析：vue是组件化开发框架，所以对于vue应用来说组件间的数据通信非常重要。此题主要考查大家vue基本功，对于vue基础api运用熟练度。另外一些边界知识如provide/inject/$attrs/$listeners则体现了面试者的知识面。

思路分析：总分
1.总述知道的所有方式
2.按组件关系阐述使用场景

回答范例：
组件通信方式大体有以下8种：
props
$emit/ $on
$children / $parent
$attrs/ $listeners
ref
$root
eventbus
vuex
(部分在V3已经移除)

根据组件之间关系讨论组件通信最为清晰有效
父子组件
props
$emit/ $on
$parent / $children
ref
$attrs / $listeners

兄弟组件
$parent
eventbus
vuex

跨层级关系
provide/inject
$root
eventbus
vuex

02.v-if和v-for哪个优先级更高？

分析：
此题考查常识，文档中曾有详细说明v2|v3；也是一个很好的实践题目，项目中经常会遇到，能够看出面试者应用能力。

思路分析：总分总模式
先给出结论
为什么是这样的
它们能放一起吗
如果不能，那应该怎样
总结

回答范例：
在 Vue 2 中，v-for 优先于 v-if 被解析；但在 Vue 3 中，则完全相反，v-if 的优先级高于 v-for。

我曾经做过实验，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件

实践中也不应该把它们放一起，因为哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表。

通常有两种情况下导致我们这样做：

为了过滤列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。此时定义一个计算属性 (比如 activeUsers)，让其返回过滤后的列表即可。

为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。此时把 v-if 移动至容器元素上 (比如 ul、ol)即可。

文档中明确指出永远不要把 v-if 和 v-for 同时用在同一个元素上，显然这是一个重要的注意事项。

看过源码里面关于代码生成的部分，

03.Vue知道for循环:key的作用吗？

分析：
这是一道特别常见的问题，主要考查大家对虚拟DOM和patch细节的掌握程度，能够反映面试者理解层次。

思路分析：总分总模式
1.给出结论，key的作用是用于优化patch性能
2.key的必要性
3.实际使用方式

总结：可从源码层面描述一下vue如何判断两个节点是否相同

回答范例：
key的作用主要是为了更高效的更新虚拟DOM。
vue在patch过程中判断两个节点是否是相同节点是key是一个必要条件，渲染一组列表时，key往往是唯一标识，所以如果不定义key的话，vue只能认为比较的两个节点是同一个，哪怕它们实际上不是，这导致了频繁更新元素，使得整个patch过程比较低效，影响性能。
实际使用中在渲染一组列表时key必须设置，而且必须是唯一标识，应该避免使用数组索引作为key，这可能导致一些隐蔽的bug；vue中在使用相同标签元素过渡切换时，也会使用key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。
从源码中可以知道，vue判断两个节点是否相同时主要判断两者的key和元素类型等，因此如果不设置key，它的值就是undefined，则可能永远认为这是两个相同节点，只能去做更新操作，这造成了大量的dom更新操作，明显是不可取的。

04.简述 Vue 的生命周期以及每个阶段做的事？

简述 Vue 的生命周期以及每个阶段做的事
必问题目，考查vue基础知识。

思路
给出概念
列举生命周期各阶段
阐述整体流程
结合实践
扩展：vue3变化

回答范例
1.每个Vue组件实例被创建后都会经过一系列初始化步骤，比如，它需要数据观测，模板编译，挂载实例到dom上，以及数据变化时更新dom。这个过程中会运行叫做生命周期钩子的函数，以便用户在特定阶段有机会添加他们自己的代码。

2.Vue生命周期总共可以分为8个阶段：创建前后, 载入前后, 更新前后, 销毁前后，以及一些特殊场景的生命周期。vue3中新增了三个用于调试和服务端渲染场景。

3.Vue生命周期流程图：

4.结合实践：

beforeCreate：通常用于插件开发中执行一些初始化任务

created：组件初始化完毕，可以访问各种数据，获取接口数据等

mounted：dom已创建，可用于获取访问数据和dom元素；访问子组件等。

beforeUpdate：此时view层还未更新，可用于获取更新前各种状态

updated：完成view层的更新，更新后，所有状态已是最新

beforeunmounted：实例被销毁前调用，可用于一些定时器或订阅的取消

unmounted：销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器

05.v-model的双向绑定以及它的实现原理？

题目分析：
双向绑定是vue的特色之一，开发中必然会用到的知识点，然而此题还问了实现原理，升级为深度考查。

思路分析：
1.给出双绑定义
2.双绑带来的好处
3.在哪使用双绑
4.使用方式
5.扩展：使用细节、原理实现描述

回答范例：
1.vue中双向绑定是一个指令v-model，可以绑定一个动态值到视图，同时视图中变化能改变该值。v-model是语法糖，默认情况下相当于:value和@input。
2.使用v-model可以减少大量繁琐的事件处理代码，提高开发效率，代码可读性也更好
3.通常在表单项上使用v-model
4.原生的表单项可以直接使用v-model，自定义组件上如果要使用它需要在组件内绑定value并处理输入事件
5.我做过测试，输出包含v-model模板的组件渲染函数，发现它会被转换为value属性的绑定以及一个事件监听，事件回调函数中会做相应变量更新操作，这说明神奇魔法实际上是vue的编译器完成的。

可能的追问：
1.v-model和sync修饰符有什么区别
2.自定义组件使用v-model如果想要改变事件名或者属性名应该怎么做

06.你知道nextTick吗，它是干什么的，实现原理是什么？？

这道题考查大家对vue异步更新队列的理解，有一定深度，如果能够很好回答此题，对面试效果有极大帮助。

答题思路：
1.nextTick是啥？下一个定义
2.为什么需要它呢？用异步更新队列实现原理解释
3.我再什么地方用它呢？抓抓头，想想你在平时开发中使用它的地方
4.下面介绍一下如何使用nextTick
5.最后能说出源码实现就会显得你格外优秀

先看看官方定义
Vue.nextTick( [callback, context] )

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

// 修改数据
vm.msg = ‘Hello’
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})

回答范例：
1.nextTick是Vue提供的一个全局API，由于vue的异步更新策略导致我们对数据的修改不会立刻体现在dom变化上，此时如果想要立即获取更新后的dom状态，就需要使用这个方法
2.Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。3.nextTick方法会在队列中加入一个回调函数，确保该函数在前面的dom操作完成后才调用。
所以当我们想在修改数据后立即看到dom执行结果就需要用到nextTick方法。
4.比如，我在干什么的时候就会使用nextTick，传一个回调函数进去，在里面执行do