Vue数据绑定实现
Vue数据绑定的实现方式
Vue的数据绑定主要通过响应式系统实现，核心是利用Object.defineProperty或ES6的Proxy来劫持数据变化。以下是具体实现方法：
双向数据绑定（v-model）
通过v-model指令实现表单元素与数据的双向绑定：
<input v-model="message">
<p>{{ message }}</p>data() {
return {
message: ''
}
}响应式原理
Vue 2.x使用Object.defineProperty实现数据劫持：
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log(`get ${key}:${val}`);
return val;
},
set(newVal) {
if (newVal !== val) {
console.log(`set ${key}:${newVal}`);
val = newVal;
}
}
});
}Vue 3.x改用Proxy实现：
const reactive = (target) => {
return new Proxy(target, {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver);
track(target, key); // 依赖收集
return res;
},
set(target, key, value, receiver) {
const res = Reflect.set(target, key, value, receiver);
trigger(target, key); // 触发更新
return res;
}
});
};计算属性（computed）
基于依赖追踪的缓存机制：
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}侦听器（watch）
观察数据变化执行回调：
watch: {
message(newVal, oldVal) {
console.log('消息变化:', oldVal, '->', newVal);
}
}条件渲染（v-if/v-show）
<div v-if="isVisible">条件渲染</div>
<div v-show="isActive">显示控制</div>列表渲染（v-for）
<li v-for="(item, index) in items" :key="item.id">
{{ index }} - {{ item.text }}
</li>实现注意事项
- 数组变异方法：Vue重写了数组的push/pop/shift/unshift/splice/sort/reverse方法
- 对象属性添加：Vue.set/Object.assign用于响应式添加新属性
- 异步更新队列：DOM更新是异步执行的，使用nextTick访问更新后的DOM
以上实现方式共同构成了Vue的响应式数据绑定系统，使开发者可以声明式地处理数据与DOM的关系。
