Vue 原理类高频面试题 ​

1. Vue 的响应式系统中，Object.defineProperty 和 Proxy 在实现上有何本质区别？Vue3 改用 Proxy 解决了哪些痛点？ ​

提示：数组监听、动态属性、性能开销

回答：

• 实现本质：Object.defineProperty 是对对象现有属性进行拦截（getter/setter），属于属性级别的劫持，必须预先知道要监听哪个属性。而 Proxy 是对整个目标对象的代理，属于对象级别的劫持，可以拦截对该对象的任何操作（如属性读写、删除、自定义枚举等）。
• 解决痛点：
  • 动态属性：Vue2 无法检测到对象属性的添加或删除，必须使用 Vue.set。Proxy 可以自动处理新属性。
  • 数组监听局限：Vue2 只能通过重写数组的原生原型方法来触发更新，且无法感知 arr[0] = value 这种直接修改。Proxy 可以完美支持。
  • 嵌套深度开销：Vue2 在初始化时需要一次性递归遍历整个对象。Proxy 是惰性（Lazy）的，只有当访问到嵌套对象时才进行下一层的拦截处理，性能更优。

2. 依赖收集（Dependency Collection）和派发更新（Trigger Updates）的具体流程是怎样的？请描述 Dep 和 Watcher 的协作关系。 ​

提示：发布-订阅模式、getter/setter 触发时机

回答：

• 具体流程：
  1. 依赖收集：当触发响应式数据的 getter 时，Vue 会检查当前是否存在全局的 Watcher（如正在渲染的组件）。若存在，则将其存入该数据的 Dep 容器中。
  2. 派发更新：当修改数据触发 setter 时，对应的 Dep 容器会遍历并执行其中记录的所有 Watcher 的 update 方法。
• 协作关系：
  • 此模式本质是发布-订阅模式。Dep 是主题，负责管理依赖（记录谁订阅了数据）；Watcher 是订阅者，负责执行具体的响应逻辑（如重新渲染）。
  • 每一个属性都有一个对应的 Dep。多个组件共享一个基础数据时，该 Dep 会收集多个组件的渲染 Watcher。

3. Vue 的模板编译过程经历了哪几个阶段？如何将模板字符串转换为渲染函数？ ​

提示：解析器生成 AST → 优化器标记静态节点 → 代码生成器生成 render 函数

回答：

1. 解析阶段 (Parse)：利用正则将 template 模板字符串解析为抽象语法树 (AST)。
2. 优化阶段 (Optimize/Transform)：遍历 AST，标记静态节点 (Static Nodes)。Vue3 在此基础上引入了静态提升和 Patch Flags，能够识别出哪些部分永远不变，哪些部分是动态的。
3. 生成阶段 (Generate)：将最终的 AST 转换为字符串形式的 JavaScript 代码，即 render 函数。

4. 虚拟 DOM 的 Diff 算法中，为什么要优先进行“同层比较”而不是跨层递归？Key 值在 Diff 过程中起到了什么作用？ ​

提示：时间复杂度优化、节点复用策略

回答：

• 同层比较原因：跨层级比较树的差异在算法层面效率极低（复杂度 $O(n^3)$）。Vue 假设“Web 应用中很少有节点跨层级移动”，因此只比较同一层级的节点（复杂度 $O(n)$），这在绝大多数场景下是性能与准确性的最佳权衡。
• Key 的作用：key 是节点的唯一身份证。Diff 算法通过 key 来判断两个节点是否属于同一节点。如果不提供 key，Vue 会尝试采用“就地复用”策略，可能导致不可预期的状态错乱；有了 key，Vue 能够精准地进行节点复用、移动或删除。

5. Vue 的异步更新队列（Async Update Queue）是如何工作的？为什么修改数据后立即访问 DOM 可能获取不到最新值？ ​

提示：nextTick 实现原理、事件循环与微任务

回答：

• 工作原理：Vue 并不是数据一变就立即渲染。为了提高性能，Vue 会开启一个队列，并缓存同一轮事件循环中的所有数据变更。在当前的同步任务（宏任务）执行完之前，Vue 都在积累变更。
• 失效原因：页面的真实 DOM 更新是异步发生的，排在当前所有同步代码执行之后。
• nextTick：其原理是利用 Promise.then 等微任务 API，在当前同步任务执行完毕后立刻执行回调。因为微任务发生在浏览器重新渲染之前，此时数据已由 Vue 更新完毕并反应到了 DOM 上。

6. Vue3 的静态提升（Static Hoisting）和 Block Tree 机制如何优化渲染性能？ ​

提示：跳过静态节点比对、动态节点标记 Patch Flags

回答：

• 静态提升：对于不依赖任何动态数据的 HTML 标签，Vue3 会在 render 函数外将其定义为常量，避免重复创建 VNode。
• Block Tree：原本的 Diff 需要递归比对整棵树。Vue3 将模板拆分为多个 Block（块）。每个 Block 内部只维护一个记录动态节点的扁平化数组。在更新时，Diff 算法只需线性遍历该数组，完全忽略静态层级，从而将核心性能开销锁定在动态内容的数量上。

7. 计算属性（Computed）的缓存特性是如何实现的？与普通方法调用有何本质区别？ ​

提示：脏检查机制、依赖追踪

回答：

• 实现原理：每一个 computed 都会创建一个专用的 Watcher（或 Effect），并带有 lazy: true 标记。它内部有一个 dirty 标志位。
  • 当读取时，若 dirty 为 true，则执行计算逻辑并设为 false；
  • 只有当其依赖的响应式数据发生变化时，才会将 dirty 重新重置为 true。
• 本质区别：
  • 计算属性：是基于依赖缓存的。只要依赖不变，无论访问多少次都直接返回缓存值。
  • 方法调用：由于其本质是普通函数，每当所在的渲染副作用重新执行时，方法必然会重新执行一次。

8. Vue 组件实例化过程中，data 选项为什么要用函数返回对象，而不是直接写对象？ ​

提示：避免多个实例共享同一数据引用

回答：

• 作用域隔离：如果 data 是一个普通对象，由于 JavaScript 引用数据类型的特性，所有该组件的实例都会指向内存中的同一个对象。修改其中一个实例的状态，会引发“牵一发而动全身”的副作用。
• 独立副本：使用函数返回对象，可以保证每个组件实例在创建时都会执行一次该函数并获得一份全新的副本，从而保证数据的私有性和独立性。

9. Vue 的事件系统是如何实现 v-on 的？事件修饰符（如 .native）底层做了哪些处理？ ​

提示：原生事件与自定义事件的分发机制

回答：

• 实现机制：
  • 原生标签：通过 addEventListener 在对应的 DOM 元素上绑定原生事件。
  • 组件标签：Vue 内部维护了一个事件中心。父组件通过 v-on 订阅子组件的自定义事件，子组件通过触发事件并通知订阅者执行回调。
• 修饰符处理：
  • 对于 .stop 和 .prevent，Vue 编译器会在生成的事件处理函数内部自动插入 e.stopPropagation() / e.preventDefault()。
  • 对于 .native (Vue 2 语法)，其本质是将事件监听器挂载到了子组件的根节点上，而不是作为组件属性传递。

10. Vue3 的 Composition API 如何解决逻辑复用问题？对比 Mixins 和 Hooks 的优缺点。 ​

提示：命名冲突、代码组织、类型推导

回答：

• 逻辑复用：Composition API 允许开发者将强相关的逻辑抽离到独立的函数（Hooks）中。这种基于函数组合的方式使得代码更加清晰且易于复用。
• 对比 Mixins：
  • Mixins 缺点：数据来源不透明（不知道变量从哪个 Mixin 来的）、容易发生命名冲突、无法感知 Mixin 内部逻辑、类型推导困难。
  • Hooks 优点：变量来源明确（观察返回值解构）、不存在命名冲突（可以按需重命名）、更好的代码组织（按功能聚合代码）、完美支持 TypeScript 类型推导。