Vue经典面试题源码级详解

• • 1、Vue组件之间通信方式有哪些？
  • • 分析：
    • 思路分析：
    • 回答范例：
    • • 1. 组件通信常用方式有以下8种：
      • 2、根据组件之间关系讨论组件通信最为清晰有效
  • 2、v-if 和 v-for哪个优先级更高
  • • 分析：
    • 思路分析：
    • 回答范例：
  • 3、简述Vue的生命周期以及各阶段做的事
  • • 分析：
    • 思路：
    • 回答范例：
  • 4、能说一说双向数据绑定的使用和原理吗
  • • 分析：
    • 思路分析：
  • 回答范例：

1、Vue组件之间通信方式有哪些？

分析：

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

组件传参的各种方式

思路分析：

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

回答范例：

1. 组件通信常用方式有以下8种：

• props
• $emit / $on
• $children / $parent
• $attrs / $listeners
• ref
• $root
• eventbus
• vuex

注意vue3废弃的几个Api

• $children
• $listeners
• v-on.native

2、根据组件之间关系讨论组件通信最为清晰有效

• 父子组件
  – props / $emit / $parent / ref / $attrs

• 兄弟组件
  – $parent / $root / eventbus / vuex

• 跨层级关系
  – eventbus / vuex / provide + inject

2、v-if 和 v-for哪个优先级更高

分析：

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

思路分析：

1. 先给出结论
2. 为什么是这样，说出细节
3. 那些场景可能导致我们这样做，该怎么处理
4. 总结，拔高

回答范例：

1. 实践中不应该把v-for和v-if放在一起使用
2. 在vue2中，v-for的优先级是高于v-if的，把他们放在一起，输出的渲染函数中可以看出会先执行循环再执行判断，哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会比较浪费；另外需要注意的是在vue3中则完全相反，v-if的优先级高于v-for，所以v-if执行的时候，它调用的变量还不存在，就会导致异常
3. 通常会有两种情况下导致我们这样做：

• 为了过滤列表中的项目（比如 v-for="item in list" v-if="item.isShow"），此时定义一个计算属性或者直接v-for时过滤改列表（比如：v-for="item in list.filter(codin => codin.age > 0)"）
• 为了过滤本该被隐藏的列表（比如 v-for="item in list" v-if="isShow" ），此时把v-if移动至容器元素上（比如 ul、ol）或者外面包一层 template即可

4. 文档中 明确指出 永远不要把 v-if 和 v-for 同时用在同一个元素上，显然这是一个注意事项
5. 源码里面关于代码生成的部分，能够清晰地看到是先处理v-if还是v-for，顺序上vue2和vue3正好相反，因此产生一些症状的不同，但是不管怎样都是不能把它们写在一起的。

3、简述Vue的生命周期以及各阶段做的事

分析：

必问题目，考查vue基础知识

思路：

1. 给出概念
2. 列举生命周期各阶段
3. 阐述整体流程
4. 结合实践
5. 扩展：vue3变化
6. 可能的追问

回答范例：

1. 每个Vue组件实例被创建后都会经过一系列初始化步骤，比如，他需要数据观测，模板编译，挂载实例到dom上，以及数据变化时更新dom。这个过程中会运行叫做生命周期钩子的函数，以便用户在特定阶段有机会添加他们自己的代码。
2. Vue生命周期总共可以分为8个阶段：创建前后、载入前后、更新前后、销毁前后，以及一些特殊场景的生命周期。vue3中新增了三个用于调试和服务端渲染场景。

3. vue生命周期流程图：
   
4. 结合实践：

• beforeCreate：通常用于插件开发中执行一些初始化任务
• created：组件初始化完毕，可以访问各种数据，获取接口数据等
• mounted：dom已创建，可用于获取访问数据和dom元素，访问子组件等
• beforeUpdate：此时view层还未更新，可用于获取更新前各种状态
• updated：完成view层的更新，更新后，所有状态已是最新
• beforeUnmount：实例被销毁之前调用，可用于一些定时器或订阅的取消
• unmounted：销毁一个实例。可清理他与其他实例的连接，解绑他的全部指令及事件监听器

5. 可能的追问：（这两个问题学习：https://juejin.cn/post/7004449155883991054）

• setup和created谁先执行？
• setup中为什么没有beforeCreate和created？

4、能说一说双向数据绑定的使用和原理吗

分析：

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

思路分析：

1. 给出双绑定义
2. 双绑带来的好处
3. 在哪使用双绑
4. 使用方式、使用细节、vue3变化
5. 原理实现描述

回答范例：

1. vue中双向绑定是一个指令v-model，可以绑定一个响应式数据，同时视图中变化能改变该值。
2. v-model是语法糖，默认情况下相当于 :value 和 @input。使用v-model可以减少大量繁琐的事件处理代码，提高开发效率。
3. 通常在表单项上使用v-model，还可以在自定义组件上使用，表示某个值的输入和输出控制。
4. 通过的方式将XXX的值绑定到表单元素value上，对于checkbox，可以使用true-value和false-value指定特殊的值，对于radio可以使用value指定特殊的值；对于select可以通过options元素的value设置特殊的值；还可以结合.lazy、.number、.trim对v-model的行为做进一步限定；v-model用在自定义组件上又会有很大不同，vue3中它类似于sync修饰符，最终展开的结果是modelValue属性和update:modelValue事件；vue3中我们甚至可以用参数形式制定多个不同的绑定。例如v-model:foo和v-model:bar，非常强大
5. v-model是一个指令，它的神奇魔法实际上是vue的编译器完成的。我做过测试，包含v-model的模板，转换为渲染函数之后，实际上还是是value属性的绑定以及input事件监听，事件回调函数中会做相应变量更新操作。编译器根据表单元素的不同会展开不同的DOM属性和事件对，比如text类型的input和textarea会展开为value和input事件；checkbox和radio类型的input会展开为checked和change事件；select用value作为属性，用change作为事件。