【Vue2.x源码系列07】监听器watch原理

上一章 Vue2计算属性原理，我们介绍了计算属性是如何实现的？计算属性缓存原理？以及洋葱模型是如何应用的？

本章目标

• 监听器是如何实现的？
• 监听器选项 - immediate、deep 内部实现

初始化

在 Vue初始化实例的过程中，如果用户 options选项中存在侦听器，则初始化侦听器

// 初始化状态
export function initState(vm) {
  const opts = vm.$options // 获取所有的选项

  // 初始化监听器
  if (opts.watch) { initWatch(vm) }
}

watch

类型：{ [key: string]: string | Function | Object | Array }
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

监听器初始化时，需要兼容 watch回调的各种类型。底层还是去调用vm.$watch创建一个监听器watch

function initWatch(vm) {
  let watch = vm.$options.watch
  for (let key in watch) {
    const handler = watch[key] // handler有可能是 (字符串/对象/函数) 或 数组
    if (Array.isArray(handler)) {
      for (let i = 0; i < handler.length; i++) {
        createWatcher(vm, key, handler[i])
      }
    } else {
      createWatcher(vm, key, handler)
    }
  }
}

// handler 有可能是字符串、对象、函数
function createWatcher(vm, key, handler) {
  let options = {}
  // 兼容字符串
  if (typeof handler === 'string') {
    handler = vm[handler]
  }
  // 兼容对象
  else if (Object.prototype.toString.call(handler) === '[object Object]') {
    options = handler
    handler = handler.handler
  }
  return vm.$watch(key, handler, options)
}

vm.$watch

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

参数：{string | Function} expOrFn
观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值

我们会创建一个 侦听器watcher，标识user: true。如果 immediate选项值为 true，则立即执行一次callback回调

注：在 options选项中使用的侦听器，最终也是调用此方法

Vue.prototype.$watch = function (exprOrFn, cb, options = {}) {
  options.user = true
  // exprOrFn 可能是字符串firstname or 函数()=>vm.firstname
  const watcher = new Watcher(this, exprOrFn, options, cb)

  // 立即执行
  if(options.immediate){
    cb.call(this, watcher.value, undefined)
  }
}

侦听器Watcher

在初始化Vue实例时，我们会给每个侦听器都创建一个对应watcher（我们称之为侦听器watcher，除此之外还有 渲染watcher 和 计算属性watcher ），他有一个 value 属性用于缓存侦听器观察的表达式的值

默认标识 user: true，用户的，代表侦听器watcher

exprOrFn，需要观察的表达式或者一个函数的计算结果，需要兼容字符串和函数两种类型

cb，侦听器回调函数。当观察的对象发生变化时，会触发dep.notify派发更新 并 调用 update 方法，然后再 run 方法中调用 cb 回调，其参数为新值和旧值

deep，侦听器选项之一，代表深度监听。我们需要在 get 方法中递归访问每一个子属性，这样就会保证所有子属性都会收集此侦听器watcher，这里我用了一个取巧的方法 - JSON.stringify ，源码在此👈👈👈

class Watcher {
  constructor(vm, exprOrFn, options, cb) {
    if (typeof exprOrFn === 'string') {
      this.getter = function () {
        return vm[exprOrFn]
      }
    } else {
      this.getter = exprOrFn // getter意味着调用这个函数可以发生取值操作
    }

    // 监听器watcher 用到的属性
    this.user = options.user // 标识是否是用户自己的watcher
    this.deep = options.deep
    this.cb = cb
    this.value =  this.get() // 存储 get返回值
  }

  get() {
    pushTarget(this) 
    let value = this.getter.call(this.vm) 
    this.deep && JSON.stringify(value) // 深度监听
    popTarget() 
    return value
  }

  // 重新渲染
  update() {
    queueWatcher(this) // 把当前的watcher 暂存起来，异步队列渲染
  }

  // queueWatcher 内部执行 run 方法
  run() {
    let oldValue = this.value
    let newValue = this.value = this.get()
    if (this.user) {
      this.cb.call(this.vm, newValue, oldValue)
    }
  }
}