vue3.0 与 2.0 的差异

Vue.js 3.0 在 Vue 2.0 的基础上进行了全面升级，以下是主要区别和核心改进：

1. 响应式系统重构

2. Composition API

3. 性能优化

4. 新特性

5. 生命周期变化

6. 废弃特性

7. 生态兼容

Vue 2.0：基于 Object.defineProperty 的响应式

实现原理

对象劫持：

• 通过 Object.defineProperty 递归遍历对象的所有属性，将每个属性转换为 getter/setter。
• 缺点：初始化时需要全量遍历，性能较差（尤其是大对象）。

function defineReactive(obj, key) {
  let value = obj[key];
  Object.defineProperty(obj, key, {
    get() {
      // 依赖收集（将当前 Watcher 添加到 Dep 中）
      dep.depend();
      return value;
    },
    set(newVal) {
      if (newVal === value) return;
      value = newVal;
      // 触发更新（通知所有 Watcher）
      dep.notify();
    }
  });
}

数组监听：

• 重写数组的 push、pop、shift、unshift、splice、sort、reverse 方法，手动触发更新。
• 缺点：无法检测通过索引直接修改数组（如 arr[0] = 1）。

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
  const original = arrayProto[method];
  Object.defineProperty(arrayMethods, method, {
    value: function(...args) {
      const result = original.apply(this, args);
      // 手动触发更新
      this.__ob__.dep.notify();
      return result;
    }
  });
});

动态属性限制：

• 新增或删除属性时无法自动触发更新，需使用 Vue.set 或 Vue.delete。

Vue 3.0：基于 Proxy 的响应式

实现原理

代理对象：

• 使用 Proxy 代理整个对象，通过 get 和 set 陷阱函数实现动态监听。
• 优点：无需递归遍历，按需代理，性能显著提升。

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      // 依赖收集
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        // 触发更新
        trigger(target, key);
      }
      return result;
    },
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key);
      // 删除属性时触发更新
      trigger(target, key);
      return result;
    }
  });
}

1. 惰性依赖收集：
   • 只有在访问属性时才会收集依赖（track），避免不必要的性能损耗。
2. 深度代理：
   • 访问嵌套对象时动态代理子对象，实现按需响应式。
3. 数组和集合类型的支持：
   • 原生支持数组索引操作（如 arr[0] = 1）。
   • 支持 Map、Set、WeakMap、WeakSet 等复杂数据结构。

function get(target, key) {
  const res = Reflect.get(target, key);
  // 如果是对象，继续代理
  return isObject(res) ? reactive(res) : res;
}

核心对比

示例代码对比

Vue 2.0 的动态属性问题

javascript复制// 需要 Vue.set 触发更新
this.$set(this.obj, 'newKey', 'value');

// 直接赋值无效
this.obj.newKey = 'value'; // 不会触发更新

Vue 3.0 的直接操作

javascript复制// 直接操作即可触发更新
this.obj.newKey = 'value'; // 自动触发响应
delete this.obj.oldKey; // 自动触发响应

总结

• Vue 2.0 的响应式系统通过 Object.defineProperty 实现，存在性能瓶颈和动态属性限制。
• Vue 3.0 基于 Proxy 重构，实现了按需代理、动态属性监听、复杂数据结构支持，性能提升显著。