2024 前端高频面试题之 Vue 篇

---

1、v-for 和 v-if 可以混合使用吗？为什么？

可以，但是尽量不要同时使用，v-for计算优先级比v-if高，首先会把虚拟节点渲染出来，然后再进行v-if判断。降低渲染性能

2、v-for 中为什么加 key？

如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 是为 Vue 中 vnode 的唯一标记，通过这个 key，diff 算法可以更准确、更快速

• 更准确：因为带 key 就不是就地复用了，在 sameNode 函数 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确。
• 更快速：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快

3、事件默认有个 event 参数，它是什么？怎么使用？事件被绑定到哪里？

当事件没有参数，则默认有个 event 参数；如果有自定义参数，则需要使用$event 传过去。

• event 的构造函数是 MouseEvent，即是原生的 event 对象
• event 被挂载到当前元素下，即 event.target

4、vue 父子组件如何通讯？

• props、$emit：
  
  父组件使用动态数据传递，子组件使用props接收，可以使用数组/对象数据结构，对象结构可以定义类型和默认值。
  
  子组件使用$emit 事件回传
  
• 自定义事件进行组件通讯：
  
  自定义事件就是使用一个额外的 js 文件，其中声明一个 Vue 实例即可
  
  $on，$emit，$off，参数分别是：注册函数名，真实函数
  
  $on：绑定自定义事件
  
  $emit：调用自定义事件
  
  $off：在组件销毁时，要及时销毁自定义事件，否则可能会造成内存泄漏。在 beforeDestroy 中调用$off
  
• $refs：
  
  获取当前组件实例
• $parent&$children：
  
  获取当前组件的父组件和子组件
• vuex：
  
  Vue 中全局状态管理系统，用于多个组件中数据共享。
• provide&inject：
  
  上层组件提供，下层组件注入使用。（适用于组件库编写）

5、父子组件声明周期调用顺序？

• 加载渲染过程：
  
  父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
• 更新过程：
  
  父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
• 销毁过程：
  
  父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
• 全流程：
  
  beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed

6、vue 双向绑定原理（响应式原理）？

采用数据劫持结合观察者模式的方式

通过 Object.defineProperty()来劫持各个属性（只会劫持已经存在的属性）的 setter，getter，dep 和 Watcher 实现依赖收集和派发更新的过程：

• vue 将 data 初始化为一个 Observer 并对对象中的每个值，重写了其中的 get、set，data 中的每个 key，都有一个独立的 dep（依赖收集器）。
• 在 get 中，