reactive.js:
import { isObject } from "../utils"; import { track, trigger } from "./effect"; export function reactive(target) { // 判断 target 类型 // 如果是基本类型,则不将其转化成响应式 if (!isObject(target)) return target; const proxy = new Proxy(target, { get(target, key, receiver) { const res = Reflect.get(target, key, receiver); // 收集依赖 track(target, key); return res; }, set(target, key, value, receiver) { const res = Reflect.get(target, key, value, receiver); // 触发依赖 trigger(target, key); return res; } }); return proxy; }
effect.js:
// 记录当前正在执行的副作用函数 let activeEffect; /** 难点 * 一个副作用函数可能依赖多个响应式数据 * 一个响应式数据更新可能会触发多个副作用函数 * 因此 targetMap 的结构是: * { * [target]: { * [key]: [] * } * } * 使用 WeakMap 是因为不需要手动删除不需要的依赖 */ const targetMap = new WeakMap(); export function effect(fn) { const effectFn = () => { try { activeEffect = effectFn; return fn(); } finally { // todo } } effectFn(); return effectFn; } export function track(target, key) { if (!activeEffect) return; let depsMap = targetMap.get(target); // 初始化时一定是不存在的 if (!depsMap) targetMap.set(target, (depsMap = new Map())); let deps = depsMap.get(key); // 同样,初始化的时候一定无值 if (!deps) depsMap.set(key, (deps = new Set())); deps.add(activeEffect); console.log(targetMap, key) } export function trigger(target, key) { const depsMap = targetMap.get(target); if (!depsMap) return; const deps = depsMap.get(key) if (!deps) return; deps.forEach(effectFn => { effectFn(); }); }
index.js(入口文件):
import { reactive } from "./reactive/reactive"; import { effect } from "./reactive/effect"; const observed = reactive({ count: 0 }); effect(() => { console.log(observed.count) })
标签:Vue,return,target,effect,reactive,key,const From: https://www.cnblogs.com/cc-freiheit/p/17529543.html