目标是构建observe 和 autorun 函数,使得在observe和autorun执行后,state.count改变时,自动触发console.log。
    image.png

    核心实现步骤有两个:

    第一是利用Object.defineProperty(),为对象中的每一个属性 (此处的state)设置getter和setter方法,这个不难理解。代码如下。
    image.png

    第二是利用autorun函数,以及一个Dep类,实现需要被监听的属性的收集。实例中的箭头函数中调用dep.depend()方法,这里也是关键点,有这个调用,activeUpdate保存的wrappedUpdate实例才能被存入subscribers列表中。
    而后在dep.notify()调用时,执行subscribers中的每一个wrappedUpdate。
    image.png

    实现如下:
    image.png

    上面两个核心步骤做完之后,只需要对observe函数稍加变动
    image.png
    在getter的时候触发dep.depend() 将wrappedUpdate实例存入subscribers列表中。
    在setter的时候触发dep.notify() 让subscribers中的每一个wrappedUpdate再执行一次。

    autorun中的console.log(state.count) 触发了getter。(这个很重要,getter中的dep.depend()执行)
    后文的state.count++触发setter。