vue简版源码watcher分析

一.vue简版源码watcher

在这里插入图片描述

今天继续探索 Watch 源码,废话不多说了

带着我的几个疑问开始

1、什么时候初始化

2、怎么确定监听哪些值

3、深度监听怎么回事

4、怎么触发我的函数

这些问题的答案会掺杂在源码的解析中,请大家看以下源码

function Watcher(vm, exp, cb) {
    //在实例上保存回调函数
    this.cb = cb; //更新界面的回调函数
    this.vm = vm; //实例vm
    this.exp = exp; //对应的表达式
    this.depIds = {}; //相关的dep的容器
    this.value = this.get(); //当前表达式对应的value
}

Watcher.prototype = {
    update: function() {
        this.run();
    },
    run: function() {
        var value = this.get();
        var oldVal = this.value;
        //判断新旧节点
        if (value !== oldVal) {
            this.value = value;
            //调用构建watcher实例的时候传递过来的回调函数,并且确定他的this指向为vm
            this.cb.call(this.vm, value, oldVal);
        }
    },
 //添加dep到watcher实例的depIds里
    addDep: function(dep) {
    
        if (value !== oldVal) {
            this.value = value;
            //调用构建watcher实例的时候传递过来的回调函数,并且确定他的this指向为vm
            this.cb.call(this.vm, value, oldVal);
        }
    },
 get: function() {
        //在watcher初始化的时候保存实例到Dep的target上
        Dep.target = this;
        //调用get方法获取当前对应表达式的数据
        var value = this.getVMVal();
        //清空target
        Dep.target = null;
        return value;
    },
 
    getVMVal: function() {
        var exp = this.exp.split('.');
        var val = this.vm._data; //获取vm_data上的数据
        exp.forEach(function(k) {
            //读取_data中表达式所对应的值 (此时会触发observer中的get方法)
            val = val[k];
        });
        return val;
    }
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值