阅读 《vue.js 设计与实现》

这本书正好适合现在的我阅读，因此每天抽时间倍加感恩的学习，这里简要的记录一下收获。

响应式原理初探

我们可以对 data 做一层拦截

const obj = new Proxy(data, {  
    get(target, key) {  
        track(target, key)  
        return target[key]  
    },  
    set(target, key, value, receiver) {  
        target[key] = value  
        trigger(target, key)  
    }})

只要有某个函数（effect）读了 data 的某个属性，那么就将该函数存起来。
只要 data 的属性被更改，那么就重新执行该函数。

难点一 怎么获取这个 effect

需要强制用户使用特定方式来执行该函数，类似 python 中的装饰器，需要用 wrapper()来包裹我们想要执行的函数。这样，这个函数就会被全局变量 activeEffect 捕捉到。

let activeEffect  
function wrapper(effect) {  
    activeEffect = effect  
    effect()  
}

难点二 怎么高效的存储这个effect

这个数据结构应该包含的信息有 目标对象target、目标属性 key、依赖函数effect 三类信息。而且一个对象可以有多个属性，一个属性可以有多个effect（当然，一个effect也可以访问多个属性）, Vue采用的是 WeakMap<target, Map<key, Set<effect>>>这种数据结构，具备自动垃圾回收的功能。