写文章不容易,点个赞呗兄弟
专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看,请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】Watch - 源码版

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

带着我的几个疑问开始

1、什么时候初始化2、怎么确定监听哪些值3、深度监听怎么回事4、怎么触发我的函数

这些问题的答案会掺杂在源码的解析中,我发现这几篇的写作套路都差不多.....

也可以看查一下我的白话版


什么时候初始化

首先,从这个问题开始我们今天的探索之旅,请看源码

function Vue(){    ... 其他处理    initState(this)    ...解析模板,生成DOM 插入页面}function initState(vm) {    ...处理 data,props,computed 等数据    if (opts.watch) {        initWatch(this, vm.$options.watch);    }}

没错,当你调用 Vue 创建实例过程中,会去处理各种选项,其中包括处理 watch


initWatch

处理 watch的方法是 initWatch,下面就呈上 源码

function initWatch(vm, watch) {        for (var key in watch) {            var watchOpt = watch[key];        createWatcher(vm, key, handler);    }}

然后这段源码并没有做什么惊天地泣鬼神的事情,只是简简单单的一个遍历,然后每个watch 都使用一个叫什么 createWatcher 的东西去处理

这个函数到底是干嘛的?暗藏着什么秘密,欢迎来到我们今晚的 《走近科学》《源码解析》

createWatcher 来看看他的真身

function createWatcher(    // expOrFn 是 key,handler 可能是对象    vm, expOrFn, handler,opts) {        // 监听属性的值是一个对象,包含handler,deep,immediate    if (typeof handler ==="object") {        opts= handler        handler = handler.handler    }        // 回调函数是一个字符串,从 vm 获取    if (typeof handler === 'string') {        handler = vm[handler]    }        // expOrFn 是 key,options 是watch 的全部选项    vm.$watch(expOrFn, handler, opts)}

大概就这样吧

1、获取到监听回调

2、调用 vm.$watch

1、获取监听回调

首先,你传入的 watch 配置可能是这三种(还有更多,差不多,不解释,累死我)

如果配置是个对象,就取handler 字段

如果配置是函数,那么直接就是 监听回调

如果配置是字符串,从实例上获取函数

2、调用 vm.$watch

看着这个方法,简直 mmp,还有完没完,我从一个函数进入一个函数,又从这个函数进入到另一个函数,迷宫啊这是.....

显然你不用急,下面还有更多......

好吧,还是先看源码

Vue.prototype.$watch = function(    // expOrFn 是 监听的 key,cb 是监听回调,opts 是所有选项    expOrFn, cb, opts){        // expOrFn 是 监听的 key,cb 是监听的回调,opts 是 监听的所有选项    var watcher = new Watcher(this, expOrFn, cb, opts);        // 设定了立即执行,所以马上执行回调    if (opts.immediate) {        cb.call(this, watcher.value);    }};

看完了吧?这么短,你们肯定看得懂的啦,就两件事

1、判断是否立即执行监听回调

如果你设置了 immediate 的话,表示不用等我数据变化,初始化时马上执行一遍,执行的代码就是直接调用 回调,绑定上下文,传入监听值

2、每个 watch 配发 watcher

代码从这里开始变得沉重,各位观众,喝口水,恰口饭,屏息观看操作

看看 watcher 的源码

“watcher 的源码之前的文章也讲过很多,但是对于每种选项的涉及的细节是不一样的,所以每次都放上来,但是只放跟本内容相关的部分代码,其他的省去以便我们快速理解”

var Watcher = function (vm, key, cb, opt) {      this.vm = vm;        this.deep = opt.deep;        this.cb = cb;      // 这里省略处理 xx.xx.xx 这种较复杂的key    this.getter = function(obj) {                return obj[key]    };        // this.get 作用就是执行 this.getter函数    this.value = this.get();};

再看看,新建 watcher 的时候 ,传入了什么

1、监听的 key

2、监听回调 (Watch 中的cb)

3、监听配置的options

这里会涉及到三个问题,现在来解释

1、怎么对设置的 key 进行监听?

我们要先对 Watch 中的 this.getter 的函数进行理解,他的本质是为了获取对象的key值

然后 getter 是在 watcher.get 中执行的,看下 get 源码

// 对本问题进行了独家简单化的源码Watcher.prototype.get = function() {        var value = this.getter(this.vm);        return value};

你能看到,Watch 在结尾会立即执行一次 watcher.get,其中便会执行 getter,便会根据你监听的key,去实例上读取并返回,存放在 watcher.value 上

看到了吗,从实例上读取属性,这句话。

首先,watch 初始化之前,data 应该初始化完毕了,每个 data 数据都已经是响应式的

使用例子来说明一下

当 watch.getter 执行,而读取了 vm.name 的时候,name的依赖收集器就会收集到 watch-watcher

于是 name 变化的时候,会可以通知到 watch,监听就成功了

2、如何进行深度监听?

首先,深度监听,是你设置了 deep 的时候,如下

然后,观察上面的 Watch 源码,deep 会保存在watcher 中,以便后用

话锋一转

上一问题说过,在 新建 watcher 的时候,会马上执行一个 get,上个问题的 get 源码简化很多,把 处理深度监听的部分去掉了,这里露出来了

Watcher.prototype.get = function() {    Dep.target= this    var value = this.getter(this.vm)        if (this.deep)  traverse(value)    Dep.target= null    return value};

没错,处理深度监听只有一条语句!

if (this.deep)  traverse(value)

value 是 getter 从实例上读取监听key 得到的值,没有疑问

但是 traverse 是何方神圣?come on 让我们深入....

function traverse(val) {        var i, keys;        // 数组逐个遍历    if (Array.isArray(val)) {        i = val.length;                // val[i] 就是读取值了,然后值的对象就能收集到 watch-watcher        while (i--) {           traverse(val[i])        }    }        else {        keys = Object.keys(val);        i = keys.length;                // val[keys[i]] 就是读取值了,然后值的对象就能收集到 watch-watcher        while (i--) {           traverse(val[keys[i]])        }    }}

你看它这段代码长,其实是个纸老虎,做的就是一个事情,不断递归深入读取对象

他的想法是这样的

因为读取,就可以让这个属性收集到 watch-watcher 的原则

就算是深层级的对象,其中的每个属性也都是响应式的,每个属性都有自己的依赖收集器

通过不断深入的读取每个属性,这样每个属性就都可以收集到 watch-watcher 了

这样不管对象内多深的属性变化,都会通知到 watch-watcher

于是这样就完成了深度监听

3、监听值变化,如何触发监听函数?

通过上面的问题,我们已经了解了大部分了

监听的数据变化的时候,就能通知 watch-watcher 更新,所谓通知更新,就是手动调用 watch.update

速度看下 watcher.update 源码

Watcher.prototype.update= function() {        var value = this.get();        if (this.deep) {                var oldValue = this.value;                this.value = value;                // cb 是监听回调        this.cb.call(this.vm, value, oldValue);    }};

很简单嘛,就是读取一遍值,然后保存新值,接着 调用 监听回调,并传入新值和 旧值

ok,就这样