Vue 面试题

01-Vue 组件通讯方式

• 父子组件：props emits $parent ref $attrs
• 兄弟组件：$parent $root EventBus vuex
• 跨层级关系：EventBus vuex Provide + Inject

02-v-for 与 v-if 不能一起使用

Vue2

• v-for 的优先级高于 v-if
• 当它们同时使用时，会先执行循环再判断条件，较为浪费性能

Vue3

• v-if 的优先级高于 v-for
• 当它们同时使用时，还不存在 v-for 中的变量，会直接导致异常

解决方案

• v-for 与 v-if 不能同时使用
• 可以提前使用数组方法过滤项目，如 filter 方法
• 嵌套一层 <template> 将两个标签分开使用

03-v-if 与 v-show 区别

04-生命周期

05-父子组件创建和挂载顺序

虚拟 DOM

Diff 算法

双向绑定

响应式原理

v-for key 的作用

computed 和 watch 区别

用途区别

• computed 用于计算产生新的数据
• watch 用于监听现有数据

mutation 和 action 区别

• mutation：原子操作，必须是同步代码
• action：可包含多个 mutation；可包含异步代码

为什么组件只能有一个根元素