[Vue] 源码学习-mini-observer实现
思否格式用不习惯,可以移步语雀
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。
文章图片
【[Vue] 源码学习-mini-observer实现】实现如下:
文章图片
上面两个核心步骤做完之后,只需要对observe函数稍加变动
文章图片
在getter的时候触发dep.depend() 将wrappedUpdate实例存入subscribers列表中。
在setter的时候触发dep.notify() 让subscribers中的每一个wrappedUpdate再执行一次。
autorun中的console.log(state.count) 触发了getter。(这个很重要,getter中的dep.depend()执行)
后文的state.count++触发setter。
推荐阅读
- 由浅入深理解AOP
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 继续努力,自主学习家庭Day135(20181015)
- python学习之|python学习之 实现QQ自动发送消息
- 一起来学习C语言的字符串转换函数
- 定制一套英文学习方案
- 漫画初学者如何学习漫画背景的透视画法(这篇教程请收藏好了!)
- 《深度倾听》第5天──「RIA学习力」便签输出第16期
- 如何更好的去学习