Vue 的双向数据绑定原理

Vue 的双向数据绑定是通过 数据劫持 + 发布-订阅模式 实现的，具体分为以下三个关键机制：

1. 数据劫持（响应式系统）

Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）监听数据变化。

Vue 2 实现：

// 简化版数据劫持
function defineReactive(obj, key) {let value = obj[key];const dep = new Dep(); // 依赖收集器Object.defineProperty(obj, key, {get() {if (Dep.target) {dep.addSub(Dep.target); // 收集依赖（Watcher）}return value;},set(newVal) {if (newVal === value) return;value = newVal;dep.notify(); // 通知所有订阅者更新}});
}

Vue 3 改进：

// 使用Proxy实现
const reactive = (target) => {return new Proxy(target, {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;}});
};

2. 依赖收集（发布-订阅模式）

Dep 类：管理依赖（一个属性对应一个Dep）Watcher 类：订阅数据变化，触发更新

class Dep {constructor() {this.subs = [];}addSub(sub) {this.subs.push(sub);}notify() {this.subs.forEach(sub => sub.update());}
}class Watcher {update() {// 执行更新（如重新渲染组件）}
}

3. 模板编译（指令解析）

Vue 编译器将模板中的指令（如 v-model）转换为绑定代码：

<input v-model="message">

编译后相当于：

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

双向绑定工作流程

初始化阶段：遍历 data 对象，用 Object.defineProperty/Proxy 劫持所有属性编译模板，为每个绑定创建 Watcher数据访问时（触发 getter）：当前 Watcher 被添加到属性的 Dep 中数据修改时（触发 setter）：Dep 通知所有 Watcher 更新Watcher 触发组件重新渲染

4、Vue 2 vs Vue 3 实现对比

特性	Vue 2	Vue 3
核心API	Object.defineProperty	Proxy
监听范围	仅能劫持已定义属性	动态新增属性自动响应
数组处理	需重写数组方法	直接监听数组变化
性能	递归遍历所有属性	惰性监听，按需触发

5、常见问题解答

Q1：为什么 Vue 3 改用 Proxy？

解决 Vue 2 无法检测对象/数组新增属性的问题性能更好（无需递归初始化所有属性）

Q2：v-model 在自定义组件中的原理？

<CustomComponent v-model="value" />

等价于：

<CustomComponent :modelValue="value"@update:modelValue="newVal => value = newVal"
/>

手写极简双向绑定

// 简易版Vue响应式
class MiniVue {constructor(options) {this.$data = options.data;this.observe(this.$data);this.compile(options.el);}observe(data) {Object.keys(data).forEach(key => {let value = data[key];const dep = new Dep();Object.defineProperty(data, key, {get() {Dep.target && dep.addSub(Dep.target);return value;},set(newVal) {value = newVal;dep.notify();}});});}compile(el) {const element = document.querySelector(el);this.walk(element);}walk(node) {if (node.nodeType === 1) { // 元素节点Array.from(node.attributes).forEach(attr => {if (attr.name.startsWith('v-')) {const dir = attr.name.substring(2);if (dir === 'model') {const key = attr.value;node.value = this.$data[key];new Watcher(this.$data, key, val => {node.value = val;});node.addEventListener('input', e => {this.$data[key] = e.target.value;});}}});}// 递归子节点...}
}

通过这种机制，Vue 实现了数据变化自动更新视图、视图输入自动更新数据的双向绑定效果。