vue 数据绑定实现
Vue 数据绑定的实现原理
Vue 的数据绑定主要通过响应式系统和虚拟 DOM实现，核心是Object.defineProperty（Vue 2）或Proxy（Vue 3）的劫持机制。
Vue 2 的实现方式
基于 Object.defineProperty
通过递归遍历数据对象，为每个属性添加 getter 和 setter，实现依赖收集和派发更新：
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log('读取属性', key);
return val;
},
set(newVal) {
if (newVal === val) return;
console.log('更新属性', key);
val = newVal;
// 触发视图更新
}
});
}依赖收集与 Watcher
每个组件实例对应一个 Watcher，在 getter 中收集依赖，在 setter 中通知 Watcher 更新视图。
Vue 3 的实现方式
基于 ProxyProxy 直接代理整个对象，无需递归遍历，性能更好：
function reactive(obj) {
return new Proxy(obj, {
get(target, key) {
console.log('读取属性', key);
return Reflect.get(target, key);
},
set(target, key, newVal) {
if (newVal === target[key]) return true;
console.log('更新属性', key);
Reflect.set(target, key, newVal);
// 触发视图更新
return true;
}
});
}响应式优化
Vue 3 引入 effect 和 track/trigger 机制，更细粒度地控制依赖追踪和更新触发。
模板编译与绑定
-
模板解析
Vue 将模板编译为渲染函数，解析指令（如v-model）和插值表达式（{{}}）。 -
虚拟 DOM 比对
数据变化时，生成新的虚拟 DOM，通过 Diff 算法高效更新真实 DOM。
双向绑定的实现（v-model）
v-model 是语法糖，本质是 :value 和 @input 的组合：
<input v-model="message">
<!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">数组和对象的特殊处理
Vue 2 中需通过 Vue.set 或数组的变异方法（如 push）触发更新。Vue 3 的 Proxy 已自动支持深层响应。
