Skip to content

数据变化时的逻辑 ​

本节目标:理解“数据变化时的逻辑”的核心思路,并能把它用于实际开发或面试表达。

修改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();
  });
}

本站总访问 — 次