vue响应式实现
Vue 响应式实现原理
Vue 的响应式系统基于 JavaScript 的 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）实现，核心是通过数据劫持和依赖收集来自动追踪数据变化并更新视图。
Vue 2.x 实现方式
数据劫持
通过 Object.defineProperty 递归地将对象的属性转换为 getter/setter，从而在属性被访问或修改时触发拦截。
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log(`访问 ${key}`);
return val;
},
set(newVal) {
if (newVal !== val) {
console.log(`修改 ${key} 为 ${newVal}`);
val = newVal;
}
}
});
}依赖收集
每个响应式属性关联一个 Dep（依赖管理器），在 getter 中收集依赖（Watcher），在 setter 中通知依赖更新。
class Dep {
constructor() {
this.subscribers = [];
}
depend() {
if (target && !this.subscribers.includes(target)) {
this.subscribers.push(target);
}
}
notify() {
this.subscribers.forEach(sub => sub());
}
}
let target = null;
function watchEffect(effect) {
target = effect;
effect();
target = null;
}Vue 3.x 实现方式
Proxy 代理
使用 Proxy 拦截对象的整个操作（包括新增/删除属性），无需递归遍历对象。
function reactive(obj) {
return new Proxy(obj, {
get(target, key) {
track(target, key);
return target[key];
},
set(target, key, value) {
target[key] = value;
trigger(target, key);
return true;
}
});
}依赖跟踪与触发
通过 track 和 trigger 函数管理依赖关系，替代 Vue 2.x 的 Dep 和 Watcher。
const targetMap = new WeakMap();
function track(target, key) {
let depsMap = targetMap.get(target);
if (!depsMap) {
targetMap.set(target, (depsMap = new Map()));
}
let dep = depsMap.get(key);
if (!dep) {
depsMap.set(key, (dep = new Set()));
}
dep.add(activeEffect);
}
function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) return;
depsMap.get(key).forEach(effect => effect());
}响应式系统的局限性
对象新增属性
Vue 2.x 中直接通过 obj.newKey = value 添加的属性不是响应式的，需使用 Vue.set 或 this.$set。
数组变更检测 Vue 2.x 无法检测以下数组变动：
- 通过索引直接设置项（如
arr[0] = newValue） - 修改数组长度（如
arr.length = 0）
解决方案是使用数组的变异方法（如 push、pop）或 Vue.set。
性能优化建议
- 避免频繁操作大型响应式对象。
- 对于不需要响应式的数据，使用
Object.freeze冻结。 - 在 Vue 3.x 中，使用
shallowReactive处理嵌套层级较浅的对象。
通过上述机制，Vue 实现了数据与视图的自动同步，开发者只需关注数据逻辑，无需手动操作 DOM。
