Vue 面试核心知识点详解

Vue 面试核心知识点详解与答题策略

一、Vue 核心概念与原理

1. ​​响应式数据绑定原理​​
   Vue 2.x 使用 Object.defineProperty 劫持数据属性的 getter/setter，结合​​发布-订阅模式​​（依赖收集器 Dep 和观察者 Watcher）实现数据变化自动更新视图。
   Vue 3.x 改用 ​​Proxy API​​，直接代理整个对象，解决了 Vue 2 中数组索引修改、对象属性增删无法监听的缺陷，性能更高且支持动态新增属性。

2. ​​生命周期钩子函数​​
   关键钩子执行顺序与场景：

   • beforeCreate：实例初始化，​​数据观测未开始​​。

   • created：数据观测完成，​​可访问 data/computed​​，但 DOM 未生成（适合异步请求）。

   • mounted：​​DOM 已挂载​​，可操作 DOM 或访问 $refs。

   • beforeUpdate/updated：数据更新前后触发。

   • beforeDestroy/destroyed：实例销毁前清理定时器、解绑事件。

3. ​​指令与模板语法​​

   • v-if vs v-show：
     v-if 是​​条件渲染​​（动态增删 DOM），v-show 是 ​​CSS 切换​​（display: none），频繁切换用 v-show。

   • v-for 必须加 ​​key​​：用于 ​​VDOM Diff 算法​​高效复用节点（避免用 index，推荐唯一 ID）。

   • v-model：语法糖，等价于 :value + @input，支持自定义组件双向绑定。

---

二、组件化开发进阶

1. ​​组件通信方式​​

   方式	适用场景	示例
   ​​Props/Events​​	父子组件	父传子：，子触发 this.$emit('event')58
   ​​Event Bus​​	任意组件	const bus = new Vue()，bus.$on/ $emit410
   ​​Vuex​​	跨层级共享状态	集中式状态管理（见下文）
   ​​Provide/Inject​​	祖先→子孙	祖先 provide: { data }，子孙 inject: ['data']10

2. ​​高级组件技术​​

   • ​​插槽（Slots）​​：

     • 默认插槽： 接收父组件内容。

     • 具名插槽： +