双向数据绑定是 Vue 的核心特性之一，它让数据与视图始终保持同步
下面探究 Vue 内部响应式系统的实现原理、依赖收集和更新派发过程，以及 v-model 如何将这些底层机制封装为语法糖。
一、双向数据绑定的基本思路
双向数据绑定主要依赖两个过程：
- 数据劫持：拦截数据的读取和修改操作，实现依赖收集（dependency tracking）。
- 自动更新：当数据发生变化时，自动通知所有依赖该数据的视图进行更新。
在 Vue 中，这一机制依托于响应式系统，它保证了数据变化时能够高效触发局部或全局的 DOM 更新。
二、Vue 2 的响应式实现 ------ 基于 Object.defineProperty
Vue 2 采用 Object.defineProperty 对每个属性进行劫持，将普通对象转为响应式对象。这种方式主要包括以下步骤：
2.1 数据劫持与 defineReactive
在 Vue 2 中，每个数据属性会经过一个类似于 defineReactive 的过程，该函数为每个属性创建了 getter 与 setter，从而实现依赖收集和派发更新。
scss
function defineReactive(obj, key, val) {
// 为每个属性创建一个依赖收集器
const dep = new Dep();
Object.defineProperty(obj, key, {
get() {
// 当有 watcher 处于激活状态时，将其加入依赖队列
if (Dep.target) {
dep.depend();
}
return val;
},
set(newVal) {
if (newVal !== val) {
val = newVal;
// 通知所有依赖该属性的 watcher 更新
dep.notify();
}
}
});
}Dep 类负责管理依赖（即 Watcher），而全局静态属性 Dep.target 用于临时保存当前正在执行的 watcher。每当视图（或计算属性）读取数据时，getter 会自动调用 dep.depend() 收集依赖；而 setter 则在数据变化后调用 dep.notify() 通知所有依赖更新。
2.2 依赖收集与 Watcher
在 Vue 2 内部，Dep 和 Watcher 类是响应式系统的关键组件。
kotlin
class Dep {
constructor() {
this.subs = [];
}
// 收集依赖
depend() {
if (Dep.target && !this.subs.includes(Dep.target)) {
this.subs.push(Dep.target);
}
}
// 通知所有订阅者更新
notify() {
this.subs.forEach(watcher => watcher.update());
}
}
class Watcher {
constructor(vm, expOrFn, cb) {
this.vm = vm;
this.getter = expOrFn;
this.cb = cb;
this.value = this.get(); // 读取数据时触发 getter 收集依赖
}
get() {
Dep.target = this;
const value = this.getter.call(this.vm, this.vm);
Dep.target = null;
return value;
}
update() {
const newVal = this.getter.call(this.vm, this.vm);
const oldVal = this.value;
this.value = newVal;
this.cb(newVal, oldVal);
}
}在这个模型中，每个 Watcher 在创建时会调用自身的 get() 方法，从而触发数据属性的 getter，将自己收集到对应的 Dep 中。当数据更新时，所有关联的 Watcher 都会调用 update() 方法，从而重新计算值并触发视图更新。
三、Vue 3 的响应式系统 ------ 基于 Proxy 的全新设计
Vue 3 使用 ES6 的 Proxy 对象替代了 Object.defineProperty，其主要优势在于：
- 全面拦截：Proxy 能够拦截对象的所有操作，包括属性的添加与删除。
- 更高的性能与简洁的代码：无需递归遍历所有属性，逻辑更加集中统一。
3.1 Proxy 实现原理
javascript
function reactive(target) {
return new Proxy(target, {
get(target, key, receiver) {
const result = Reflect.get(target, key, receiver);
// 收集依赖
track(target, key);
return result;
},
set(target, key, value, receiver) {
const oldVal = target[key];
const result = Reflect.set(target, key, value, receiver);
if (oldVal !== value) {
// 触发依赖更新
trigger(target, key);
}
return result;
},
deleteProperty(target, key) {
const result = Reflect.deleteProperty(target, key);
// 删除属性时同样触发更新
trigger(target, key);
return result;
}
});
}track 与 trigger 分别用于依赖收集与更新派发。Vue 3 内部借助 effect 函数和响应式依赖收集机制管理所有响应式状态，使得整个更新过程更加高效和透明。
3.2 effect 与响应式依赖追踪
Vue 3 中，响应式依赖追踪通常借助一个全局的 effect 函数来实现。该函数在执行时会将自身注册为当前依赖的收集者，类似 Vue 2 的 Dep.target。当响应式数据发生变化时，通过触发 trigger 函数来调用所有注册的 effect，从而更新视图或重新计算值。
四、v-model 的实现机制
v-model 是 Vue 封装双向数据绑定的语法糖，其背后的工作原理可以拆分为以下两部分：
4.1 内部转换
对于标准的表单元素（如 <input>、<textarea>），使用 v-model 实际上等同于同时绑定了 value 属性和 input 事件处理器。例如：
xml
<!-- v-model 的底层转换 -->
<input :value="message" @input="message = $event.target.value">这样，当用户输入时，事件处理器更新 Vue 实例中的数据；反之，数据更新时，由响应式系统通知视图更新 value 属性。
4.2 自定义组件中的 v-model
对于自定义组件，v-model 默认绑定组件的 modelValue（Vue 3）或 value（Vue 2）属性，并监听 update:modelValue（Vue 3）或 input（Vue 2）事件。下面是一个 Vue 3 自定义组件的示例：
xml
<template>
<div>
<input :value="modelValue" @input="handleInput">
</div>
</template>
<script>
export default {
name: 'CustomInput',
props: {
modelValue: {
type: String,
default: ''
}
},
methods: {
handleInput(event) {
// 通过 update:modelValue 事件通知父组件更新数据
this.$emit('update:modelValue', event.target.value);
}
}
}
</script>我们可以根据需求扩展 v-model 的行为，例如添加 .trim、.number 等修饰符来实现输入值的自动处理。通过这种设计，Vue 将表单输入的双向绑定细节完全封装，开发者无需关心底层响应式实现。
五、性能优化与更新策略
5.1 异步更新队列与批处理
为了避免数据频繁更新带来的性能问题，Vue 采用了异步更新队列和批处理机制。当多个数据变更在同一事件循环中触发时，Vue 会将更新操作批量收集，统一进行异步更新，从而减少不必要的 DOM 重渲染。
5.2 避免依赖追踪陷阱
在实际项目中，依赖追踪可能遇到如下问题：
- 深层嵌套对象：Vue 2 中需要递归劫持所有属性，容易带来性能瓶颈；而 Vue 3 的 Proxy 能够更好地应对这一问题。
- 循环依赖：在复杂数据结构中，需谨慎设计响应式依赖，避免无限循环更新。
六、总结
- Vue 2 通过
Object.defineProperty实现数据劫持、依赖收集和更新派发，核心在于 Dep 与 Watcher 的协同工作。 - Vue 3 则采用 Proxy 与 effect 的组合，实现了更全面和高效的响应式系统，解决了 Vue 2 的部分局限性。
- v-model 则为开发者提供了简洁的双向数据绑定语法，既适用于原生表单元素，也支持自定义组件扩展。