Vue3 reactivity ｜收集依赖和触发依赖的核心逻辑

欢迎大家关注：

我的仓库 & 崔老师的仓库

describe('reactivity', () => {
    it('happy path', () => {
        const user = reactivity({name: 'John', age: 23})

        let nextAge
        effect(() => nextAge = user.age + 1)

        // init
        export(nextAge).toBe(11)
        
        // update
        user.age++
        export(nextAge).toBe(12)
    })
})

收集依赖

user 是一个响应式对象。

响应式对象里有一个 container 容器。user 的所有依赖都要收集到 container 里。

依赖通过 effect 来收集，effect 接受一个 fn，effect 函数运行一开始就会调用 fn。

而我们 fn 里的 user.age 这段代码会触发 get 操作。

一旦触发 get 操作，响应式对象 user 就可以将 fn 收集到自己的 container 里。

触发依赖

当触发 user 的 set 操作时，user 就会将其 container 中收集的所有 fn 都调用一遍。