[Vue] 源码学习-mini-observer实现

DiracKeeko

思否格式用不习惯,可以移步语雀
https://www.yuque.com/diracke...

目标是构建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。

阅读 146
7 声望
0 粉丝
0 条评论
你知道吗?

7 声望
0 粉丝
宣传栏