Vue数据双向绑定的原理剖析

一、什么是数据双向绑定

数据双向绑定是MVVM（Model-View-ViewModel）框架的核心特性之一，指的是当数据模型（Model）发生变化时，视图（View）会自动更新；反之，当用户操作视图时，数据模型也会相应更新。这种机制极大地简化了DOM操作，让开发者可以更专注于业务逻辑。

在Vue中，双向绑定最常见的例子就是使用v-model指令：

<input v-model="message">
<p>{{ message }}</p>

二、Vue双向绑定的实现原理

Vue的数据双向绑定主要通过以下三大模块实现：

1. 数据劫持（Observer）

Vue通过Object.defineProperty()（Vue 2.x）或Proxy（Vue 3.x）来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Vue 2.x实现：

function defineReactive(obj, key, val) {Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter() {console.log(`获取${key}: ${val}`);return val;},set: function reactiveSetter(newVal) {if (newVal === val) return;console.log(`设置${key}: ${newVal}`);val = newVal;// 通知更新dep.notify();}});
}

Vue 3.x改用Proxy：

const observed = new Proxy(data, {get(target, key, receiver) {const result = Reflect.get(target, key, receiver);track(target, key); // 依赖收集return result;},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;}
});

2. 依赖收集（Dep/Watcher）

Vue实现了一个依赖收集机制，通过Dep类和Watcher类来建立数据与视图之间的依赖关系：

class Dep {constructor() {this.subs = [];}addSub(sub) {this.subs.push(sub);}notify() {this.subs.forEach(sub => sub.update());}
}class Watcher {constructor(vm, exp, cb) {this.vm = vm;this.exp = exp;this.cb = cb;this.value = this.get();}get() {Dep.target = this; // 设置当前Watcherconst value = this.vm.data[this.exp]; // 触发getterDep.target = null;return value;}update() {const newValue = this.vm.data[this.exp];if (this.value !== newValue) {this.value = newValue;this.cb.call(this.vm, newValue);}}
}

3. 编译过程（Compile）

Vue的编译器会解析模板指令，将模板中的变量替换成数据，并初始化渲染页面视图。同时，为每个指令/数据绑定节点创建Watcher，添加到Dep中：

解析模板指令，替换模板数据，初始化视图
将模板指令对应的节点绑定更新函数
添加监听数据的订阅者，数据变化时更新视图

三、v-model的实现原理

v-model是Vue提供的语法糖，本质上是value属性和input事件的组合：

<input v-model="message">

等价于：

<input :value="message" @input="message = $event.target.value"
>

对于不同的表单元素，Vue会进行不同的处理：

text和textarea元素使用value属性和input事件
checkbox和radio使用checked属性和change事件
select字段将value作为prop并将change作为事件

四、Vue 2.x与Vue 3.x的实现差异

特性	Vue 2.x	Vue 3.x
数据劫持方式	Object.defineProperty	Proxy
数组监听	需要特殊处理	原生支持
性能	递归劫持所有属性	惰性劫持，按需响应
新增属性	需要Vue.set	直接响应