Appearance
数据变化时的逻辑
本节目标:理解“数据变化时的逻辑”的核心思路,并能把它用于实际开发或面试表达。
修改baseHandle中的set方法:
export const mutableHandlers = {
get(target, key, receiver) {
if (key === ReactiveFlags.IS_REACTIVE) {
return true
};
track(target, 'get', key)
return Reflect.get(target, key, receiver)
},
set(target, key, value, receiver) {
==let== ==oldValue== ===== ==target====[====key====];==
==let== ==result== ===== ==Reflect====.====set====(====target====,== ==key====,== ==value====,== ==receiver====);==
==if== ==(====oldValue== ==!==== ==value====)== =={==
==//== ==要更新==
==trigger====(====target====,== =='set'====,== ==key====,== ==value====,== ==oldValue====);==
==}==
==return== ==result====;==
}
}在effect.ts中实现trigger方法:
export function trigger(target, type, key, value, oldValue) {
const depsMap = targetMap.get(target);
// 触发的值不在模板中使用
if (!depsMap) return;
// 找到了属性对应的effcts
const effects = depsMap.get(key);
effects && effects.forEach(effect => {
effect.run();
});
}