首页 > 其他 > 详细

这一次 彻底理解Vue的watch实现原理及其实现方式(转)

时间:2019-06-27 12:30:37      阅读:187      评论:0      收藏:0      [点我收藏+]

画一张watch的简单工作流程图:

技术分享图片

把上文的 Dep,Oberver,Wather拿过来并做部分更改(增加收集依赖去重处理):

Dep代码如下:

//标识当前的Dep id
let uidep = 0
class Dep{
    constructor () {
        this.id = uidep++
        // 存放所有的监听watcher
        this.subs = []
      }
 
      //添加一个观察者对象
      addSub (Watcher) {
        this.subs.push(Watcher)
      }
 
      //依赖收集
    depend () {
        //Dep.target 作用只有需要的才会收集依赖
        if (Dep.target) {
          Dep.target.addDep(this)
        }
    }
 
    // 调用依赖收集的Watcher更新
    notify () {
        const subs = this.subs.slice()
        for (let i = 0, l = subs.length; i < l; i++) {
          subs[i].update()
        }
      }
}
 
Dep.target = null
const targetStack = []
 
// 为Dep.target 赋值

function pushTarget (Watcher) {
if (Dep.target) targetStack.push(Dep.target)
Dep.target = Watcher
}
function popTarget () {
Dep.target = targetStack.pop()
}

 

这一次 彻底理解Vue的watch实现原理及其实现方式(转)

原文:https://www.cnblogs.com/niechencn/p/11095996.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!