vue实现双向绑定
Vue 双向绑定的实现原理
Vue 的双向绑定主要通过 v-model 指令实现，底层基于数据劫持和发布-订阅模式。核心是结合 Object.defineProperty（Vue 2）或 Proxy（Vue 3）监听数据变化，并同步更新视图。
Vue 2 的实现方式
数据劫持
通过 Object.defineProperty 劫持对象的属性，在属性被访问或修改时触发 getter 和 setter：
let data = { value: '' };
Object.defineProperty(data, 'value', {
get() {
return this._value;
},
set(newVal) {
this._value = newVal;
console.log('数据更新了'); // 触发视图更新
}
});发布-订阅模式
- Dep 类：收集依赖（Watcher），通知更新。
- Watcher 类：监听数据变化，触发回调更新视图。
Vue 3 的实现方式
Vue 3 使用 Proxy 替代 Object.defineProperty，支持深层对象监听和数组变化检测：
let data = { value: '' };
const proxy = new Proxy(data, {
get(target, key) {
return target[key];
},
set(target, key, value) {
target[key] = value;
console.log('数据更新了'); // 触发视图更新
return true;
}
});v-model 的实现示例
v-model 是语法糖，本质是 :value 和 @input 的组合：
<input v-model="message">
<!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">自定义组件中的 v-model
在 Vue 2 中需显式定义 value 和 input 事件：
export default {
props: ['value'],
methods: {
updateValue(newVal) {
this.$emit('input', newVal);
}
}
};Vue 3 支持自定义 modelValue 和 update:modelValue：
export default {
props: ['modelValue'],
emits: ['update:modelValue'],
methods: {
updateValue(newVal) {
this.$emit('update:modelValue', newVal);
}
}
};响应式系统的核心流程
- 初始化阶段：遍历数据对象，通过劫持或代理建立响应式依赖。
- 编译阶段：解析模板指令，创建订阅者（Watcher）。
- 更新阶段：数据变化时触发
setter或Proxy的拦截，通知 Watcher 更新视图。
注意事项
- 性能优化：避免深层嵌套对象，或使用
Object.freeze()跳过响应式处理。 - 数组监听：Vue 2 需通过重写数组方法（如
push、splice）实现响应式。 - Proxy 的优势：Vue 3 的
Proxy可直接监听数组和对象的新增/删除属性。
