Vue 的双向绑定原理，Vue2 和 Vue3 双向绑定原理的区别

Vue 的双向绑定（Two-way Data Binding）是其核心特性之一，其本质是通过数据劫持结合发布-订阅模式实现的。以下是 Vue2 和 Vue3 在双向绑定原理上的区别和演进：

文章目录

Vue 的双向绑定原理，Vue2 和 Vue3 双向绑定原理的区别
- - **1. Vue2 的双向绑定原理**
  - - **(1) 数据劫持（Data Observation）**
    - **(2) 依赖收集与派发更新**
    - **(3) 局限性**
  - **2. Vue3 的双向绑定原理**
  - - **(1) 基于 Proxy 的数据劫持**
    - **(2) 依赖管理优化**
    - **(3) 性能优势**
  - **3. Vue2 与 Vue3 的双向绑定对比**
  - **4. 代码示例对比**
  - - **Vue2 的响应式实现**
    - **Vue3 的响应式实现**
  - **总结**

1. Vue2 的双向绑定原理

Vue2 基于 Object.defineProperty 实现数据劫持，核心流程如下：

(1) 数据劫持（Data Observation）

对象属性监听：通过 Object.defineProperty 递归遍历对象的每个属性，将其转换为 getter/setter。

Object.defineProperty(obj, key, {get() { return value; },set(newVal) {value = newVal;dep.notify(); // 通知依赖更新}
});

数组监听：无法直接监听数组下标变化，需重写数组的 push/pop/shift/unshift/splice/sort/reverse 方法。

(2) 依赖收集与派发更新

Dep（依赖管理器）：每个属性对应一个 Dep 实例，用于收集依赖（Watcher）。
Watcher（观察者）：组件渲染时触发 getter，将 Watcher 添加到 Dep 中；数据变化时触发 setter，Dep 通知所有 Watcher 更新视图。

(3) 局限性

无法监听新增/删除属性：需通过 Vue.set 或 Vue.delete 手动触发响应。
数组监听不完善：通过索引修改数组元素（如 arr[0] = 1）或修改数组长度不会触发更新。

2. Vue3 的双向绑定原理

Vue3 改用 Proxy 替代 Object.defineProperty，并重构了响应式系统，主要改进如下：

(1) 基于 Proxy 的数据劫持

代理整个对象：Proxy 直接代理整个对象，无需递归遍历属性，性能更高。

const proxy = new Proxy(obj, {get(target, key) { /* 收集依赖 */ },set(target, key, value) { /* 触发更新 */ }
});

天然支持数组和新增属性：通过 Proxy 可以直接监听数组索引变化和对象属性增删。

(2) 依赖管理优化

依赖存储结构：使用 WeakMap 和 Map 存储依赖关系，避免内存泄漏。
响应式 API：提供 reactive（对象）和 ref（基本类型）等函数，响应式逻辑与组件解耦。

(3) 性能优势

惰性依赖收集：仅在访问属性时收集依赖，减少初始化开销。
更细粒度的更新：通过 Proxy 精准定位变化，避免 Vue2 中全量对比的性能损耗。

3. Vue2 与 Vue3 的双向绑定对比

特性	Vue2（Object.defineProperty）	Vue3（Proxy）
数据劫持方式	递归遍历属性，逐个劫持	代理整个对象，无需递归
数组监听	需重写数组方法，无法监听索引赋值	直接监听数组索引变化
新增/删除属性	需手动调用 `Vue.set/Vue.delete`	自动触发响应
性能	初始化递归遍历性能较差	初始化更快，更新更高效
兼容性	支持 IE9+	不支持 IE，需兼容环境使用 `@vue/compat`

4. 代码示例对比

Vue2 的响应式实现

// 对象响应式
function observe(obj) {Object.keys(obj).forEach(key => {let value = obj[key];const dep = new Dep();Object.defineProperty(obj, key, {get() {dep.depend(); // 收集依赖return value;},set(newVal) {value = newVal;dep.notify(); // 触发更新}});});
}

Vue3 的响应式实现

// 基于 Proxy 的响应式
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) {Reflect.set(target, key, value, receiver);trigger(target, key); // 触发更新return true;}});
}