01-Vue组件之间通信方式有哪些
vue是组件化开发框架，所以对于vue应用来说组件间的数据通信非常重要。此题主要考查大家vue基本功，对于vue基础api运用熟练度。另外一些边界知识如provide/inject/$attrs则提现了面试者的知识广度。
组件传参的各种方式
思路分析：
总述知道的所有方式
按组件关系阐述使用场景
回答范例：
组件通信常用方式有以下8种：
props
$emit/$on
$children/$parent
$attrs/$listeners
ref
$root
eventbus
vuex
根据组件之间关系讨论组件通信最为清晰有效
父子组件
props/$emit/$parent/ref/$attrs
兄弟组件
$parent/$root/eventbus/vuex
跨层级关系
eventbus/vuex/provide+inject
02-v-if和v-for哪个优先级更高？
分析：
此题考查常识，文档中曾有详细说明v2
v3；也是一个很好的实践题目，项目中经常会遇到，能够看出面试者api熟悉程度和应用能力。
思路分析：
先给出结论
为什么是这样的，说出细节
哪些场景可能导致我们这样做，该怎么处理
总结，拔高
回答范例：
实践中不应该把v-for和v-if放一起
在vue2中，v-for的优先级是高于v-if，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件，哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会比较浪费；另外需要注意的是在vue3中则完全相反，v-if的优先级高于v-for，所以v-if执行时，它调用的变量还不存在，就会导致异常
通常有两种情况下导致我们这样做：
为了过滤列表中的项目(比如v-for="userinusers"v-if="user.isActive")。此时定义一个计算属性(比如activeUsers)，让其返回过滤后的列表即可（比如users.filter(u=u.isActive)）。
为了避免渲染本应该被隐藏的列表(比如v-for="userinusers"v-if="shouldShowUsers")。此时把v-if移动至容器元素上(比如ul、ol)或者外面包一层template即可。
文档中明确指出永远不要把v-if和v-for同时用在同一个元素上，显然这是一个重要的注意事项。
源码里面关于代码生成的部分，能够清晰的看到是先处理v-if还是v-for，顺序上vue2和vue3正好相反，因此产生了一些症状的不同，但是不管怎样都是不能把它们写在一起的。
知其所以然：
做个测试，test.html两者同级时，渲染函数如下：
anonymous(
){
with(this){return_c(div,{attrs:{"id":"app"}},_l((items),function(item){return(item.isActive)?_c(div,{key:item.id},[_v("\n"+_s(item.name)+"\n")]):_e()}),0)}
}
做个测试，test-v3.html
03-简述Vue的生命周期以及每个阶段做的事
必问题目，考查vue基础知识。
思路
给出概念
列举生命周期各阶段
阐述整体流程
结合实践
扩展：vue3变化
回答范例
1.每个Vue组件实例被创建后都会经过一系列初始化步骤，比如，它需要数据观测，模板编译，挂载实例到dom上，以及数据变化时更新dom。这个过程中会运行叫做生命周期钩子的函数，以便用户在特定阶段有机会添加他们自己的代码。
2.Vue生命周期总共可以分为8个阶段：创建前后,载入前后,更新前后,销毁前后，以及一些特殊场景的生命周期。vue3中新增了三个用于调试和服务端渲染场景。
3.Vue生命周期流程图：
4.结合实践：
beforeCreate：通常用于插件开发中执行一些初始化任务
created：组件初始化完毕，可以访问各种数据，获取接口数据等
mounted：dom已创建，可用于获取访问数据和dom元素；访问子组件等。
beforeUpdate：此时view层还未更新，可用于获取更新前各种状态
updated：完成view层的更新，更新后，所有状态已是最新
beforeunmount：实例被销毁前调用，可用于一些定时器或订阅的取消
unmounted：销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器
可能的追问
setup和created谁先执行？
setup中为什么没有beforeCreate和created？
04-能说一说双向绑定使用和原理吗？
题目分析：
双向绑定是vue的特色之一，开发中必然会用到的知识点，然而此题还问了实现原理，升级为深度考查。
思路分析：
给出双绑定义
双绑带来的好处
在哪使用双绑
使用方式、使用细节、vue3变化
原理实现描述
回答范例：
vue中双向绑定是一个指令v-model，可以绑定一个响应式数据到视图，同时视图中变化能改变该值。
v-model是语法糖，默认情况下相当于:value和
input。使用v-model可以减少大量繁琐的事件处理代码，提高开发效率。通常在表单项上使用v-model，还可以在自定义组件上使用，表示某个值的输入和输出控制。
通过inputv-model="xxx"的方式将xxx的值绑定到表单元素value上；对于checkbox，可以使用true-value和false-value指定特殊的值，对于radio可以使用value指定特殊的值；对于select可以通过options元素的value设置特殊的值；还可以结合.lazy,.number,.trim对v-mode的行为做进一步限定；v-model用在自定义组件上时又会有很大不同，vue3中它类似于sync修饰符，最终展开的结果是modelValue属性和update:modelValue事件；vue3中我们甚至可以用参数形式指定多个不同的绑定，例如v-model:foo和v-model:bar，非常强大！
v-model是一个指令，它的神奇魔法实际上是vue的编译器完成的。我做过测试，包含v-model的模板，转换为渲染函数之后，实际上还是是value属性的绑定以及input事件监听，事件回调函数中会做相应变量更新操作。编译器根据表单元素的不同会展开不同的DOM属性和事件对，比如text类型的input和textarea会展开为value和input事件；checkbox和radio类型的input会展开为checked和change事件；select用value作为属性，用change作为事件。
可能的追问：
v-model和sync修饰符有什么区别
自定义组件使用v-model如果想要改变事件名或者属性名应该怎么做
知其所以然：
测试代码，test.html
观察输出的渲染函数：
//inputtype="text"v-model="foo"
_c(input,{
directives:[{name:"model",rawName:"v-model",value:(foo),expression:"foo"}],
attrs:{"type":"text"},
domProps:{"value":(foo)},
on:{
"input":function($event){
if($event.target.