面试题：Vue 2与Vue 3在响应式原理上提升的核心技术差异

Vue 2响应式原理核心技术

Object.defineProperty：Vue 2通过Object.defineProperty方法来劫持对象的属性访问和赋值操作，从而实现数据的响应式。当一个数据对象被创建时，Vue会遍历这个对象的所有属性，并使用Object.defineProperty将每个属性转换为“getter”和“setter”。在“getter”中收集依赖，在“setter”中触发依赖更新。例如：

let data = { name: 'John' };
Object.defineProperty(data, 'name', {
  get() {
    // 收集依赖，例如将当前的Watcher添加到Dep的依赖列表中
    return value;
  },
  set(newValue) {
    if (newValue!== value) {
      value = newValue;
      // 触发依赖更新，通知所有依赖这个属性的Watcher进行更新
    }
  }
});

Dep与Watcher：Dep是一个依赖管理器，每个被劫持的属性都有一个对应的Dep实例，用来收集依赖（即Watcher）。Watcher是一个观察者，当数据发生变化时，Watcher会收到通知并执行更新操作，例如重新渲染视图。

Vue 3响应式原理核心技术

Proxy：Vue 3使用ES6的Proxy对象来实现响应式系统。Proxy可以对目标对象进行全方位的代理，包括属性的读取、赋值、枚举、函数调用等操作。相比Object.defineProperty只能劫持对象的属性，Proxy提供了更强大和灵活的功能。例如：

let data = { name: 'John' };
let proxy = new Proxy(data, {
  get(target, property) {
    // 收集依赖
    return target[property];
  },
  set(target, property, value) {
    target[property] = value;
    // 触发依赖更新
    return true;
  }
});

Reflect：在Vue 3的响应式实现中，Reflect对象与Proxy配合使用。Reflect提供了一套与Object类似的方法，但这些方法更符合语言内部的行为，并且在使用Proxy时，使用Reflect的方法可以使代码更加简洁和安全。例如在Proxy的set陷阱中，可以使用Reflect.set(target, property, value)来设置属性值，这样可以避免一些潜在的问题。

Vue 3相较于Vue 2在响应式原理方面的主要提升与改进

性能提升
- 深度监听优化：Vue 2在对对象进行响应式处理时，需要深度遍历对象的所有属性并使用Object.defineProperty进行劫持，对于深层嵌套的对象性能开销较大。Vue 3使用Proxy可以直接代理整个对象，无需深度遍历，只有在访问到嵌套对象的属性时才会进行响应式处理，大大减少了初始化时的性能开销。
- 依赖跟踪精准化：Vue 3的依赖跟踪更加精准。在Vue 2中，由于Object.defineProperty的局限性，当对象的某个属性发生变化时，可能会导致一些不必要的更新。而Vue 3通过Proxy可以更精确地知道哪些属性被访问和修改，从而只通知真正依赖这些属性的Watcher进行更新，提高了更新的效率。
功能增强
- 支持数组和Map、Set等数据结构：Vue 2对数组的响应式处理相对复杂且存在一些局限性，例如直接通过索引修改数组元素不会触发视图更新。Vue 3使用Proxy可以对数组以及Map、Set等数据结构进行原生的响应式支持，不需要像Vue 2那样进行特殊处理，使用起来更加方便和自然。
- 更好的TypeScript支持：Vue 3在设计响应式系统时充分考虑了TypeScript的类型推导，使得在使用TypeScript开发Vue应用时，代码的类型更加准确和清晰，减少了类型相关的错误，提高了代码的可维护性。
代码结构优化：Vue 3的响应式系统代码结构更加简洁和模块化，易于维护和扩展。Proxy的使用使得代码逻辑更加清晰，与Vue 2中基于Object.defineProperty的复杂实现相比，Vue 3的代码更易于理解和调试。

星途面试题库

面试题：Vue 2与Vue 3在响应式原理上提升的核心技术差异

知识考点

面试题答案

Vue 2响应式原理核心技术

Vue 3响应式原理核心技术

Vue 3相较于Vue 2在响应式原理方面的主要提升与改进