Vue源码解析--实现一个watcher

最新推荐文章于 2024-05-13 00:58:10 发布

Bpab

最新推荐文章于 2024-05-13 00:58:10 发布

阅读量345

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_54904533/article/details/116429658

版权

本文将探讨Vue框架中的Watcher实现。Watcher作为Observer和Compile之间的通信桥梁，其主要任务是在实例化时向订阅器(dep)注册自身，并拥有update方法以响应数据变化时的视图更新。通过在Watcher实例化时调用get()方法，触发属性的getter，将Watcher添加到属性的订阅器中。Dep.target的使用确保了Watcher只在创建时添加到dep，避免重复添加。

摘要由CSDN通过智能技术生成

实现Watcher

我们前面讲过，Observe()函数实现data对象的属性劫持，并在属性值改变时触发订阅器的notify()通知订阅者Watcher，订阅者就会调用自身的update方法实现视图更新。

Compile()函数负责解析模板，初始化页面，并且为每个data属性新增一个监听数据的订阅者（new Watcher）。

Watcher订阅者作为Observer和Compile之间通信的桥梁，所以我们可以大致知道Watcher的作用是什么。

主要做的事情是:

在自身实例化时往订阅器(dep)里面添加自己。
自身必须有一个update()方法。
待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调。

先给出全部代码，再分析具体的功能。

//Watcher
function Watcher(vm, exp, cb) {
    this.vm = vm;
    this.cb = cb;
    this.exp = exp;
    this.value = this.get();//初始化时将自己添加进订阅器
};

Watcher.prototype = {
    update: function(){
        this.run();
    },
    run: function(){
        const value = this.vm[this.exp];
        //console.log('me:'+value);
        if (value != this.value){
            this.value = value;
            this.cb.call(this.vm,val