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}: ${val}`);
return val;
},
set(newVal) {
if (newVal !== val) {
console.log(`设置 ${key}: ${newVal}`);
val = newVal;
}
}
});
}依赖收集
每个响应式属性关联一个 Dep 实例，用于存储依赖（即 Watcher 实例）。在 getter 中收集依赖，在 setter 中通知更新。
class Dep {
constructor() {
this.subscribers = [];
}
depend() {
if (target && !this.subscribers.includes(target)) {
this.subscribers.push(target);
}
}
notify() {
this.subscribers.forEach(sub => sub());
}
}Watcher
Watcher 代表一个依赖，在初始化时触发 getter 以收集依赖，数据变化时执行回调。
let target = null;
function watcher(fn) {
target = fn;
target();
target = null;
}Vue 3.x 实现方式
Proxy 代理
Vue 3 使用 Proxy 替代 Object.defineProperty，能直接监听对象和数组的变化，无需递归遍历。
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);
}
});
}依赖跟踪与触发
通过 track 和 trigger 函数管理依赖关系，原理与 Vue 2.x 类似，但实现更简洁。
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 无法检测对象属性的添加或删除，需使用 Vue.set 或 Vue.delete。Vue 3.x 通过 Proxy 解决了这一问题。
数组变化
Vue 2.x 通过重写数组方法（如 push、pop）实现响应式，直接通过索引修改或修改长度不会触发更新。Vue 3.x 的 Proxy 支持对数组的全面监听。
总结
Vue 的响应式系统通过数据劫持和依赖管理实现自动更新。Vue 2.x 依赖 Object.defineProperty，需处理一些边界情况；Vue 3.x 改用 Proxy，提供了更完善的响应式支持。
