响应式原理之Vue2 VS Vue3

Vue2与Vue3的响应式原理核心差异在于数据劫持的实现方式。Vue2使用Object.defineProperty实现属性级拦截，而Vue3改用ES6的Proxy实现对象级代理，这使得Vue3在响应式能力、性能优化和扩展性上实现了显著提升。

---

一、Vue2的响应式原理

核心机制

1. 数据劫持：

• 通过Object.defineProperty递归遍历对象的每个属性，将其转换为getter/setter。
• 局限性：
  • 无法检测新增/删除属性（需通过Vue.set/Vue.delete）。
  • 对数组的索引修改和长度变化无法监听（需重写数组方法如push, pop等）。

2. 依赖收集：

• Watcher：每个组件实例对应一个Watcher，数据变化时通知Watcher触发更新。
• Dep类：每个属性关联一个Dep实例，用于存储依赖（Watcher）。
• 流程：
  • 数据读取时触发getter，将当前Watcher加入Dep。
  • 数据修改时触发setter，Dep通知所有关联Watcher执行更新。

示例与缺陷

// Vue2中对象监听  
const data = {
   
    a: 1 };  
Object.defineProperty(data, 'a', {
   
     
  get() {
   
    /* 依赖收集 */ },  
  set() {
   
    /* 触发更新 */ }  
});