vue 双向实现原理
Vue 双向绑定的实现原理
Vue 的双向绑定主要通过 v-model 指令实现，其核心是结合数据劫持（Object.defineProperty 或 Proxy）和发布-订阅模式。以下是具体实现机制：
数据劫持
Vue 2.x 使用 Object.defineProperty 劫持对象的属性，Vue 3.x 改用 Proxy 代理整个对象。当数据发生变化时，触发 setter 或 Proxy 的捕获器，通知依赖更新。
Vue 2.x 示例：
let data = { value: '' };
Object.defineProperty(data, 'value', {
get() {
return this._value;
},
set(newVal) {
this._value = newVal;
console.log('数据更新了'); // 触发视图更新
}
});Vue 3.x 示例：
let data = { value: '' };
let proxy = new Proxy(data, {
set(target, key, value) {
target[key] = value;
console.log('数据更新了'); // 触发视图更新
return true;
}
});发布-订阅模式
- 依赖收集：在编译模板时，解析
v-model指令，为表单元素（如input）绑定事件监听（如input事件）。 - 通知更新：当数据变化时，触发 setter/Proxy，通知所有订阅该数据的 Watcher 更新视图。
简单实现：
class Dep {
constructor() {
this.subscribers = [];
}
depend() {
if (target && !this.subscribers.includes(target)) {
this.subscribers.push(target);
}
}
notify() {
this.subscribers.forEach(sub => sub());
}
}
let dep = new Dep();
let target = null;
function watcher(fn) {
target = fn;
dep.depend();
fn();
target = null;
}v-model 的工作流程
- 模板编译：将
v-model="message"解析为:value="message"和@input="message = $event.target.value"。 - 数据绑定：表单元素的值与数据属性
message动态关联。 - 事件监听：用户输入时触发
input事件，更新数据属性，进而触发视图重新渲染。
示例代码：
<input v-model="message">
<!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">不同表单元素的适配
- `：绑定
value属性和input事件。 <checkbox>：绑定checked属性和change事件。<select>：绑定value属性和change事件。
Vue 内部会根据元素类型自动选择对应的属性和事件。
总结
Vue 的双向绑定本质是语法糖，通过数据劫持监听数据变化，结合发布-订阅模式实现视图与数据的自动同步。v-model 简化了手动绑定值和事件的代码，提升开发效率。
