effect 流程
触发响应式对象的 get
- 实例化 ReactiveEffect => _effect
- 调用 _effect 的方法 run()
- run() 方法:将实例化对象 activeEffect 存到全局(方便后续触发依赖是调用),然后调用 effect 的回调函数 fn
- fn() 方法:触发响应式对象的 get 方法,然后触发 track 方法,然后触发 trackEffects 方法收集依赖(activeEffect),
触发响应式对象的 set
- target 的值改变时,触发 set 方法,然后调用 trigger 方法触发依赖
- trigger 方法:找到 target 的依赖集合,遍历调用依赖的 run 方法
- run 方法调用 fn 方法,从而触发 get 方法
- 接下来的操作和上面 👆🏻 步骤 4 一致!!!
// 单测内容
it('should observe basic properties', () => {
let dummy
const counter = reactive({ num: 0 })
effect(() => (dummy = counter.num))
expect(dummy).toBe(0)
counter.num = 7
expect(dummy).toBe(7)
})