proxy代理实现响应式的底层原理
1.proxy代理:target为被代理的值,handler中的get和set函数是被代理对象被访问和修改时触发的操作,用proxy实现的原理即为用proxy代理要实现响应式的值,然后再proxy的handler中的set收集依赖于这个值更新而触发的副作用函数,然后set再执行这些收集的副作用函数
js
const proxyMap = new WeakMap();
const handler = {
// 拦截获取属性操作
get(target, prop, receiver) {
const value = target[prop];
// 如果值是对象类型且非 null,递归地为该对象创建 Proxy(深度代理)
if (typeof value === 'object' && value !== null) {
if (!proxyMap.has(value)) {
// 缓存已代理的对象,避免重复代理
proxyMap.set(value, new Proxy(value, handler)); //如果对象的属性还是一个对象,
//设置值为一个新的proxy对象,实现对象的深层拦截
}
return proxyMap.get(value); // 返回已代理的对象
}
return value; // 如果不是对象类型,则直接返回值
},
// 拦截设置属性操作
set(target, prop, value, receiver) {
console.log(`Setting ${prop} to ${value}`);
target[prop] = value;
return true; // 返回 true 表示设置成功
},
}
2.vue3利用proxy实现响应式
js
// targetMap 用来存储响应式对象和它们的属性依赖关系
const targetMap = new WeakMap();
// 用来存储当前正在执行的副作用函数
let activeEffect = null;
function effect(fn) {
activeEffect = fn; // 设置当前的副作用函数
fn(); // 执行副作用函数
activeEffect = null; // 执行完后清除副作用函数
}
function track(target, key) {
if (!activeEffect) return; // 如果没有副作用函数,就不收集依赖
// 从 targetMap 中获取 target 对象的 depsMap
let depsMap = targetMap.get(target);
if (!depsMap) {
targetMap.set(target, (depsMap = new Map())); // 初始化 depsMap
}
// 从 depsMap 中获取该属性的依赖集合
let deps = depsMap.get(key);
if (!deps) {
depsMap.set(key, (deps = new Set())); // 初始化 deps 集合
}
// 将当前的副作用函数添加到依赖集合中
deps.add(activeEffect);
}
function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) return;
const deps = depsMap.get(key);
if (!deps) return;
// 遍历依赖集合并执行每个副作用函数
deps.forEach(effect => effect());
}
function reactive(target) {
return new Proxy(target, {
get(target, key) {
track(target, key); // 收集依赖
return target[key]; // 返回属性值
},
set(target, key, value) {
target[key] = value; // 修改属性值
trigger(target, key); // 触发更新
return true;
}
});
}
// 示例
const state = reactive({ count: 0 });
effect(() => {
console.log(`count is: ${state.count}`);
});
state.count = 1; // 修改 count 会触发 `trigger`,执行副作用函数
相关知识:
- proxy代理的是整个对象,可以拦截整个对象的操作(如果对象的属性还是对象,那么递归的为这个属性创造一个新的proxy对象),不像vue2用object.defineproperty需要给每个对象的属性设置getter和setter,而且proxy支持动态拦截,可以拦截到对象上的新属性,而且支持
watch
js
function watch(source, cb) {
let getter;
if (typeof source === 'function') {
getter = source; // 如果 source 是一个函数,则直接用它作为 getter
} else {
getter = () => traverse(source); // 如果 source 是一个对象,则对其进行递归遍历
}
let oldValue, newValue;
// 定义 effectFn,封装副作用函数
const effectFn = effect(
() => getter(), // 获取需要监听的数据
{
lazy: true, // 初始化时不执行 effect
scheduler() {
// 当数据变化时触发的调度器
newValue = effectFn(); // 获取新的值
cb(newValue, oldValue); // 执行回调,传入新旧值
oldValue = newValue; // 更新旧值
}
}
);
// 初次执行 effectFn,得到初始值
oldValue = effectFn();
}
computed
js
function computed(getter) {
let value;
let dirty = true;
// effectFn 是由 effect 创建的副作用函数
const effectFn = effect(getter, {
lazy: true, // 延迟执行,只有在计算属性被访问时才计算
scheduler() {
dirty = true; // 当依赖的值发生变化时,标记为脏数据,表示需要重新计算
}
});
return {
get value() {
if (dirty) {
value = effectFn(); // 重新计算
dirty = false; // 计算完后标记为不脏
}
return value; // 返回缓存值
}
};
}