美文网首页
vue源码解析:watch方法的实现原理

vue源码解析:watch方法的实现原理

作者: 嗳湫 | 来源:发表于2021-03-03 21:30 被阅读0次

    watch方法方法用来监听vue实例变化的,那么watch方法如何实现呢?

    vm.$watch( expOrFn, callback, [options] )
    

    参数:

    • {string | Function} expOrFn
    • {Function | Object} callback
    • {Object} [options]
    • {boolean} deep
    • {boolean} immediate

    返回值:{Function} unwatch

    用法:
    观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。

    注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

    // 键路径
    vm.$watch('a.b.c', function (newVal, oldVal) {
      // 做点什么
    })
     
    // 函数
    vm.$watch(
      function () {
        // 表达式 `this.a + this.b` 每次得出一个不同的结果时
        // 处理函数都会被调用。
        // 这就像监听一个未被定义的计算属性
        return this.a + this.b
      },
      function (newVal, oldVal) {
        // 做点什么
      }
    )
    

    vm.$watch 返回一个取消观察函数,用来停止触发回调:

    var unwatch = vm.$watch('a', cb)
    // 之后取消观察
    unwatch()
    

    选项:deep

    为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

    vm.$watch('someObject', callback, {
      deep: true
    })
    vm.someObject.nestedValue = 123
    // callback is fired 
    

    选项:immediate

    在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调:

    vm.$watch('a', callback, {
      immediate: true
    })
    // 立即以 `a` 的当前值触发回调
    

    注意在带有 immediate 选项时,你不能在第一次回调时取消侦听给定的 property。

    // 这会导致报错
    var unwatch = vm.$watch(
      'value',
      function () {
        doSomething()
        unwatch()
      },
      { immediate: true }
    )
    

    如果你仍然希望在回调内部调用一个取消侦听的函数,你应该先检查其函数的可用性:

    var unwatch = vm.$watch(
      'value',
      function () {
        doSomething()
        if (unwatch) {
          unwatch()
        }
      },
      { immediate: true }
    )
    

    原理:

    // src/core/instance/state.js
    
    Vue.prototype.$watch = function (expOrFn,cb,options) {
        const vm: Component = this
        if (isPlainObject(cb)) {
          return createWatcher(vm, expOrFn, cb, options)
        }
        options = options || {}
        options.user = true
        const watcher = new Watcher(vm, expOrFn, cb, options)
        if (options.immediate) {
          cb.call(vm, watcher.value)
        }
        return function unwatchFn () {
          watcher.teardown()
        }
      }
    

    首先,会判断传入的回掉函数是不是一个对象,如果是,那么就表明用户是将第二个参数回掉函数和第三个参数options结合起来传入的,那么此时就调用createWatcher函数:

    function createWatcher (vm,expOrFn,handler,options) {
        if (isPlainObject(handler)) {
            options = handler
            handler = handler.handler
        }
        if (typeof handler === 'string') {
            handler = vm[handler]
        }
        return vm.$watch(expOrFn, handler, options)
    }
    

    createWatcher函数接收四个参数,该函数内部其实就是从用户合起来传入的对象中把回调函数cb和参数options剥离出来,然后再以常规的方式调用$watch方法并将剥离出来的参数穿进去。

    回到 watch函数中,获取到用户传入的options,如果用户没有传入则将其赋值为一个默认空对象。watch 方法内部会创建一个watcher实例,由于该实例是用户手动调用$watch方法创建而来的,所以给options添加user属性并赋值为true,用于区分用户创建的watcher实例和Vue内部创建的watcher实例。

    接着创建一个watcher实例。判断如果用户在选项参数options中指定的immediate为true,则立即用被观察数据当前的值触发回调。最后返回一个取消观察函数unwatchFn,用来停止触发回调。这个取消观察函数unwatchFn内部其实是调用了watcher实例的teardown方法。

    export default class Watcher {
        constructor (/* ... */) {
            // ...
            this.deps = []
        }
        teardown () {
            let i = this.deps.length
            while (i--) {
                this.deps[i].removeSub(this)
            }
        }
    }
    

    谁读取了数据,就表示谁依赖了这个数据,那么谁就会存在于这个数据的依赖列表中,当这个数据变化时,就会通知谁。也就是说,如果谁不想依赖这个数据了,那么只需从这个数据的依赖列表中把谁删掉即可。
    在上面代码中,创建watcher实例的时候会读取被观察的数据,读取了数据就表示依赖了数据,所以watcher实例就会存在于数据的依赖列表中,同时watcher实例也记录了自己依赖了哪些数据,另外我们还说过,每个数据都有一个自己的依赖管理器dep,watcher实例记录自己依赖了哪些数据其实就是把这些数据的依赖管理器dep存放在watcher实例的this.deps = []属性中,当取消观察时即watcher实例不想依赖这些数据了,那么就遍历自己记录的这些数据的依赖管理器,告诉这些数据可以从你们的依赖列表中把我删除了。

    当选项参数options中的deep属性为true时,如何实现深度观察呢?

    所谓深度观察,就是当obj对象发生变化时我们会得到通知,通知当obj.a属性发生变化时我们也要能得到通知,简单的说就是观察对象内部值的变化。

    要实现这个功能也不难,我们知道,要想让数据变化时通知我们,那我们只需成为这个数据的依赖即可,因为数据变化时会通知它所有的依赖,那么如何成为数据的依赖呢,很简单,读取一下数据即可。也就是说我们只需在创建watcher实例的时候把obj对象内部所有的值都递归的读一遍,那么这个watcher实例就会被加入到对象内所有值的依赖列表中,之后当对象内任意某个值发生变化时就能够得到通知了。

    在创建watcher实例的时候,会执行Watcher类中get方法来读取一下被观察的数据。

    export default class Watcher {
        constructor (/* ... */) {
            // ...
            this.value = this.get()
        }
        get () {
            // ...
            // "touch" every property so they are all tracked as
            // dependencies for deep watching
            if (this.deep) {
                traverse(value)
            }
            return value
        }
    }
    

    在get方法中,如果传入的deep为true,则会调用traverse函数。

    const seenObjects = new Set()
     
    export function traverse (val: any) {
        _traverse(val, seenObjects)
        seenObjects.clear()
    }
     
    function _traverse (val: any, seen: SimpleSet) {
        let i, keys
        const isA = Array.isArray(val)
        if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) {
            return
        }
        if (val.__ob__) {
            const depId = val.__ob__.dep.id
            if (seen.has(depId)) {
                return
            }
            seen.add(depId)
        }
        if (isA) {
            i = val.length
            while (i--) _traverse(val[i], seen)
        } else {
            keys = Object.keys(val)
            i = keys.length
            while (i--) _traverse(val[keys[i]], seen)
        }
    }
    

    可以看到,该函数其实就是个递归遍历的过程,把被观察数据的内部值都递归遍历读取一遍。

    首先先判断传入的val类型,如果它不是Array或object,再或者已经被冻结,那么直接返回,退出程序。

    然后拿到val的dep.id,存入创建好的集合seen中,因为集合相比数据而言它有天然的去重效果,以此来保证存入的dep.id没有重复,不会造成重复收集依赖。

    接下来判断如果是数组,则循环数组,将数组中每一项递归调用_traverse;如果是对象,则取出对象所有的key,然后执行读取操作,再递归内部值。

    这样,把被观察数据内部所有的值都递归的读取一遍后,那么这个watcher实例就会被加入到对象内所有值的依赖列表中,之后当对象内任意某个值发生变化时就能够得到通知了。

    相关文章

      网友评论

          本文标题:vue源码解析:watch方法的实现原理

          本文链接:https://www.haomeiwen.com/subject/hvpcqltx.html