VUE源码解析之变化侦测(三)

 
在之前的两篇博客已经写了vue的变化侦测实现原理。大致回顾下，主要VUE实现变化侦测主要是：开始通过Observer类遍历每个属性，然后通过Object.defineProperty对属性进行数据劫持，每当其触发getter的时候通过依赖收集器(Dep)来收集依赖(Watcher)。当侦听属性发生变化的时候，会触发setter进而触发遍历Dep里面的依赖Watcher，然后Watcher会通知其他地方做相应的操作。
Array则是通过拦截器来进行相应的侦听，原理也是差不多，不同的只是Dep收集的位置和侦听数据进行操作的方式罢了。

前面说了vue2中也有一些无法侦测的操作，例如：添加属性，删除属性，通过设置.length来清空数组。所以其提供了几个API来完善这些不足。下面来着重探讨一下侦测相关API的实现原理。

 

vm.$watch

API：vm.$watch(expOrFn,callback,[options])
参数：expOrFn 观察的目标对象
 callback： 对象变化后触发的回调函数
  [options]：可选参数，object类型
       deep:true 深度监听
       immediate:true 立即执行回调函数
用法：用于观察一个表达式或computed函数在Vue.js实例上的变化。回调函数调用时，会从参数得到新数据(new value)和旧数据(old value)。其返回一个取消当前侦测的方法。

源码解析：
$watch的实现其实就是对Watcher的一种封装罢了，只是在其基础上多了函数侦测和第三个可选参数。我们直接看代码

Vue.prototype.$watch = function (expOrFn, cb, options) {
    const vm = thisoptions = options || {}
    const watcher = new watcher(vm, expOrFn, cb, options)
    if (options.immediate) {
        cb.call(vm, watcher.value)
    }
    return function unwatchFn() {
        watcher.teardown()
    }
}

从代码看，我们创建了一个watcher实例来实现vm.$watch的基本功能，判断传入参数immediate来决定是否立刻执行回调函数，最后返回一个取消当前观察的函数。
接我们需要对Watcher函数进行修改，我们需要对其加个判断，判断其是否是函数类型然后进行相应操作，如果是函数，Watcher会同时观察函数中读取的所有Vue.js实例上的响应式数据。同时这里需要在Watcher中加一个判断是否是函数操作，这里就不再解释了。

这里有个问题，就是当我们执行返回的取消方法的时候，我们并不知道自己订阅了谁，也就是哪些侦听属性。所以这里我们需要建立一个deps来保存自己订阅了谁，当执行取消方法的时候，好告诉侦听属性我不再订阅你了，当你变化的时候也不用再发通知过来了。

export default class Watcher {
    constructor(vm, expOrFn, cb) {
            this.vm = vm
            this.deps = []
            this.depIds = new Set()
                ......
        }
        ......
        addDep(dep) {
            const id = dep.id
            if (!this.depIds.has(id)) {
                this.depIds.add(id) //记录当前Watcher订阅了这个Dep
                this.deps.push(dep) //添加当前的dep
                dep.addSub(this) //添加当前依赖到Dep中
            }
        }
}

我们这里可以看到，我们定义了2个遍历，一个用来存放Watcher订阅的id，一个用来添加当前订阅了的dep。这时候我们给Dep添加一个id属性，每次触发getter的时候，我们在Watcher中判断是否已经添加了这个dep的id，如果没有才继续下面操作，这也避免了之前说的Dep中重复添加Watcher的问题。
这样当我们执行返回的取消函数时，我们只需要遍历deps从中把当前的Watcher删除掉即可。

这里还有个问题就是包含参数deep深度侦听的问题，其实处理起来也很简单，我们只需要判断是否deep为true，然后递归遍历vaule的所有子值来触发他们的收集依赖功能即可。这里就不给出代码。

 

vm.$set

API：vm.$set(target,key,value)
参数：
 target：观察的目标对象
 key： 设置目标对象的属性
  value：设置目标对象的值

用法：在object上设置一个属性，如果object是响应的，Vue.js会保证属性被创建之后也是响应的，并且触发视图的更新。这个方法主要避开Vue.js不能背侦测属性被添加限制。

源码解析：

export function set(target, key, val) {
    if (Array.isArray(target) && isValidArrayIndex(key)) {
        target.length = Math.max(target.length, key)
        target.splice(key, 1, val)
    }
    //已经被侦测
    if (key in target && (key in Object.prototype)) {
        target[key] = val;
        return val
    }

    const ob = target.__ob__
    if (target._isVue || (ob && ob.vmCount)) {
        ProcessingInstruction.env.NODE_ENV !== 'production' && warn(
            "Avoid adding reactive properties to a Vue instance or its root $data" +
            "at runtime -declare it upfront in the data option"
        )
        return val
    }
    if (!ob) {
        target[key] = val
        return val
    }
    defineReactive(ob.value, key, val)
    ob.dep.notify()
    return val
}

1.一开始我们先对Array进行判断，如果传递的索引值大于当前的数组的length，就需要让target的length等于索引值。接下来我们只需要调用splice方法来处理，由于我们侦测再处理Array中已经设置了拦截器，当使用splice方法的时候会自动侦测变化。
2.解析来我们判断该属性是否被侦测的object，如果是的话，直接修改就好，其会自动触发变化。
3.如果都不是，说明设置的key未被侦测的对象，接下来我们获取target的__ob__的值，再判断该target是否是合法值。处理文档规定“target不能是Vue.js实例货Vue.js实例的根数据对象”
4.如果该target不是响应式的，也就是没有__ob__属性，我们直接设置值就好。如果是则调用defineRearctive对设置的key进行侦测。

vm.$delete

API：vm.$delete(target,key)
参数：
 target：观察的目标对象
 key： 删除目标对象的属性

用法：删除对象的属性。如果对象是响应式的，需要确保删除能够触发视图更新。这个方法主要用于避免Vue.js不能检测到属性被删除的限制。

源码解析：

export function del(target, key) {
    if (Array.isArray(target) && isValidArrayIndex(key)) {
        target.splice(key, 1)
    }

    const ob = target.__ob__
    if (target._isVue || (ob && ob.vmCount)) {
        ProcessingInstruction.env.NODE_ENV !== 'production' && warn(
            "Avoid adding reactive properties to a Vue instance or its root $data" +
            "at runtime -declare it upfront in the data option"
        )
        return val
    }

    //如果key不是target自身属性
    if (!hasOwn(target, key)) {
        return
    }
    delete target[key]

    //如果ob不存在
    if (!ob) {
        return val
    }
    ob.dep.notify() //向依赖发通知
}

这个方法理解起来更简单，该方法的前前面都是和set方法类似的，就不再重复说明的。后面我们对其判断其是否是自身的属性和判断ob是否存在，如果是则终止程序，最后再向依赖发送变化通知即可。

 
注：本文主要参考自《深入浅出Vue.js》