关于前端:Vue-源码学习miniobserver实现

4次阅读

共计 641 个字符,预计需要花费 2 分钟才能阅读完成。

思否格局用不习惯,能够移步语雀
https://www.yuque.com/diracke…

指标是构建 observe 和 autorun 函数,使得在 observe 和 autorun 执行后,state.count 扭转时,主动触发 console.log。

外围实现步骤有两个:

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

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

实现如下:

下面两个外围步骤做完之后,只须要对 observe 函数稍加变动

在 getter 的时候触发 dep.depend() 将 wrappedUpdate 实例存入 subscribers 列表中。
在 setter 的时候触发 dep.notify() 让 subscribers 中的每一个 wrappedUpdate 再执行一次。

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

正文完
 0