实现简易vue响应式
实现简易 Vue 响应式
要实现一个简易的 Vue 响应式系统，核心是利用 JavaScript 的 Object.defineProperty 或 ES6 的 Proxy 来劫持数据的变化，并在数据变化时触发更新。以下是两种实现方式：
使用 Object.defineProperty
function defineReactive(obj, key, val) {
// 递归处理嵌套对象
observe(val);
Object.defineProperty(obj, key, {
get() {
console.log(`get ${key}: ${val}`);
return val;
},
set(newVal) {
if (newVal !== val) {
console.log(`set ${key}: ${newVal}`);
observe(newVal); // 处理新值为对象的情况
val = newVal;
}
}
});
}
function observe(obj) {
if (typeof obj !== 'object' || obj === null) {
return;
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key]);
});
}
const data = { foo: 'foo', bar: { a: 1 } };
observe(data);使用 Proxy
function reactive(obj) {
if (typeof obj !== 'object' || obj === null) {
return obj;
}
return new Proxy(obj, {
get(target, key) {
console.log(`get ${key}`);
return reactive(target[key]);
},
set(target, key, val) {
console.log(`set ${key}`);
target[key] = val;
return true;
}
});
}
const data = reactive({ foo: 'foo', bar: { a: 1 } });依赖收集与更新
为了实现类似 Vue 的依赖收集和更新，可以引入一个简单的 Dep 和 Watcher 机制：
class Dep {
constructor() {
this.subscribers = new Set();
}
depend() {
if (activeEffect) {
this.subscribers.add(activeEffect);
}
}
notify() {
this.subscribers.forEach(effect => effect());
}
}
let activeEffect = null;
function watchEffect(effect) {
activeEffect = effect;
effect();
activeEffect = null;
}
function reactive(obj) {
const deps = new Map();
return new Proxy(obj, {
get(target, key) {
let dep = deps.get(key);
if (!dep) {
dep = new Dep();
deps.set(key, dep);
}
dep.depend();
return target[key];
},
set(target, key, val) {
target[key] = val;
const dep = deps.get(key);
if (dep) {
dep.notify();
}
return true;
}
});
}
const state = reactive({ count: 0 });
watchEffect(() => {
console.log(`count is: ${state.count}`);
});以上代码实现了一个简易的 Vue 响应式系统，包括数据劫持、依赖收集和更新触发。实际 Vue 的实现会更加复杂，包括虚拟 DOM 比对、组件系统等，但核心原理与此类似。
