vue2源码系列-深入Watcher

let uid = 0
export default class Watcher {
  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    // renderWatcher 一个实例对应唯一一个renderWatcher
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this)
    // options
    if (options) {
      this.deep = !!options.deep // deepWatcher
      this.user = !!options.user // userWatcher
      this.lazy = !!options.lazy // computed实现
      this.sync = !!options.sync // syncWatcher
      this.before = options.before // 前置函数 比如在渲染前会调用 hook:mounted
    } else {
      this.deep = this.user = this.lazy = this.sync = false
    }
    this.cb = cb
    this.id = ++uid // uid for batching
    this.active = true
    this.dirty = this.lazy // for lazy watchers
    // deps newDeps 用于dep收集
    this.deps = []
    this.newDeps = []
    this.depIds = new Set()
    this.newDepIds = new Set()
    this.expression = process.env.NODE_ENV !== 'production'
      ? expOrFn.toString()
      : ''
    // parse expression for getter
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
    }
    // 非computed执行get()
    this.value = this.lazy
      ? undefined
      : this.get()
  }
  get () {
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      // 执行getter添加订阅
      value = this.getter.call(vm, vm)
    } catch (e) {
      if (this.user) {
        handleError(e, vm, `getter for watcher "${this.expression}"`)
      } else {
        throw e
      }
    } finally {
      // watch deep 参数实现原理
      if (this.deep) {
        // traverse就是递归遍历value触发各个属性的getter
        traverse(value)
      }
      popTarget()
      // 清空本轮deps
      this.cleanupDeps()
    }
    return value
  }
  // 添加订阅
  addDep (dep: Dep) {
    const id = dep.id
    // 防止重复收集
    if (!this.newDepIds.has(id)) {
      this.newDepIds.add(id)
      this.newDeps.push(dep)
      if (!this.depIds.has(id)) {
        dep.addSub(this)
      }
    }
  }
  // 清空本轮deps
  cleanupDeps () {
    let i = this.deps.length
    while (i--) {
      const dep = this.deps[i]
      if (!this.newDepIds.has(dep.id)) {
        dep.removeSub(this)
      }
    }
    let tmp = this.depIds
    this.depIds = this.newDepIds
    this.newDepIds = tmp
    this.newDepIds.clear()
    tmp = this.deps
    this.deps = this.newDeps
    this.newDeps = tmp
    this.newDeps.length = 0
  }
  // 接收订阅中心的更新通知
  update () {
    // computed使用
    if (this.lazy) {
      this.dirty = true
    // 同步watcher
    } else if (this.sync) {
      this.run()
    // 异步watcher队列
    } else {
      queueWatcher(this)
    }
  }
  run () {
    // 执行回调
    if (this.active) {
      const value = this.get()
      if (
        value !== this.value ||
        isObject(value) ||
        this.deep
      ) {
        // set new value
        const oldValue = this.value
        this.value = value
        if (this.user) {
          const info = `callback for watcher "${this.expression}"`
          invokeWithErrorHandling(this.cb, this.vm, [value, oldValue], this.vm, info)
        } else {
          this.cb.call(this.vm, value, oldValue)
        }
      }
    }
  }
  // computed的更新通知
  evaluate () {
    this.value = this.get()
    this.dirty = false
  }
  // 用于computed依赖其它属性deps
  depend () {
    let i = this.deps.length
    while (i--) {
      this.deps[i].depend()
    }
  }
  // 移除deps
  teardown () {
    if (this.active) {
      if (!this.vm._isBeingDestroyed) {
        remove(this.vm._watchers, this)
      }
      let i = this.deps.length
      while (i--) {
        this.deps[i].removeSub(this)
      }
      this.active = false
    }
  }
}
复制代码

cleanupDeps () {
  let i = this.deps.length
  while (i--) {
    // 移除上一轮不必要的订阅
    const dep = this.deps[i]
    if (!this.newDepIds.has(dep.id)) {
      dep.removeSub(this)
    }
  }
  // 这里的实现有点绕 将newDepIds赋值为depIds，而后再通过clear方法清空
  // 让人难免觉得多此一举，为什么不直接 newDepIds = [] 呢
  // 按照我个人的理解是 newDepIds = [] 势必要新建数组
  // 而下面的方式不需要开辟新内存，也不用回收旧内存，一直是原来两个内存地址，属于优化内存的写法
  let tmp = this.depIds
  this.depIds = this.newDepIds
  this.newDepIds = tmp
  this.newDepIds.clear()
  tmp = this.deps
  this.deps = this.newDeps
  this.newDeps = tmp
  this.newDeps.length = 0
}
复制代码

const computedWatcherOptions = { lazy: true }
function initComputed (vm: Component, computed: Object) {
  // 收集计算属性
  const watchers = vm._computedWatchers = Object.create(null)
  // 判断服务端渲染
  const isSSR = isServerRendering()
  // 遍历computed
  for (const key in computed) {
    const userDef = computed[key]
    // 兼容函数及对象写法
    const getter = typeof userDef === 'function' ? userDef : userDef.get
    if (!isSSR) {
      // 实例化watcher
      // 特别
      watchers[key] = new Watcher(
        vm,
        getter || noop,
        noop,
        computedWatcherOptions
      )
    }
    // 定义getter
    if (!(key in vm)) {
      defineComputed(vm, key, userDef)
    }
  }
}
复制代码

export function defineComputed (
  target: any,
  key: string,
  userDef: Object | Function
) {
  // 这段代码比较多但是逻辑不复杂 主要就是判断计算属性的set get设置
  // 我们重点关注 get 就行
  // 其实主要逻辑就是通过createComputedGetter创建getter函数再定义到vm对应属性中
  const shouldCache = !isServerRendering()
  if (typeof userDef === 'function') {
    sharedPropertyDefinition.get = shouldCache
      ? createComputedGetter(key)
      : createGetterInvoker(userDef)
    sharedPropertyDefinition.set = noop
  } else {
    // 这边有个cache参数可以用于关闭缓存
    sharedPropertyDefinition.get = userDef.get
      ? shouldCache && cache !== false
        ? createComputedGetter(key)
        : createGetterInvoker(userDef.get)
      : noop
    sharedPropertyDefinition.set = userDef.set || noop
  }
  // 定义到vm对应属性中
  Object.defineProperty(target, key, sharedPropertyDefinition)
}
复制代码

function createComputedGetter (key) {
  return function computedGetter () {
    // 获取我们在函数initComputed中设置的watcher
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      // 我们之前说过computed watcher设置了lazy=true
      // 这样同时dirty也会设置为true
      if (watcher.dirty) {
        // 正常的watcher在实例化的时候就会调用get()进行依赖收集及获取值
        // 而计算属性需要在属性的get函数中主动计算值
        watcher.evaluate()
      }
      // 这里是实现computed数据驱动的原理
      // 我们举个例子 name() {return this.firtName + this.lastName}
      // 在渲染watcher中因为会调用到 this.name 就会走到当前函数
      // 在当前函数中 Dep.target 则会指向渲染 watcher
      // 而在计算属性new Watcher的时候
      // 我们说过其会收集对应的dep数组也就是firtName和lastName对应的dep
      // 此时调用watcher.depend()则会将收集的dep分别订阅当前的渲染watcher
      // 所以当触发firtName或者lastName的时候，就会触发dep.notify进而通知渲染watcher更新
      if (Dep.target) {
        watcher.depend()
      }
      return watcher.value
    }
  }
}
复制代码

if (watcher.dirty) {
  // 正常的watcher在实例化的时候就会调用get()进行依赖收集及获取值
  // 而计算属性需要在属性的get函数中主动计算值
  watcher.evaluate()
}
复制代码

update () {
  // 和普通watcher不同的是
  // 依赖的值更新时不会调用run函数
  // 而是仅仅将dirty设置true来表明值已更新
  // 这样就不会调用get()进行更新
  if (this.lazy) {
    this.dirty = true
  } else if (this.sync) {
    this.run()
  } else {
    queueWatcher(this)
  }
}
复制代码

evaluate () {
  // 在此才会调用get更新value 同时将dirty设置为fasle表明值已经更新
  this.value = this.get()
  this.dirty = false
}
复制代码

function initWatch (vm: Component, watch: Object) {
  for (const key in watch) {
    const handler = watch[key]
    // 数组处理
    if (Array.isArray(handler)) {
      for (let i = 0; i < handler.length; i++) {
        createWatcher(vm, key, handler[i])
      }
    } else {
      // 创建watcher
      createWatcher(vm, key, handler)
    }
  }
}
复制代码

function createWatcher (
  vm: Component,
  expOrFn: string | Function,
  handler: any,
  options?: Object
) {
  // 处理兼容不同的写法
  if (isPlainObject(handler)) {
    options = handler
    handler = handler.handler
  }
  if (typeof handler === 'string') {
    handler = vm[handler]
  }
  // 最终调用vm.$watch
  return vm.$watch(expOrFn, handler, options)
}
复制代码

Vue.prototype.$watch = function (
    expOrFn: string | Function,
    cb: any,
    options?: Object
  ): Function {
    const vm: Component = this
    if (isPlainObject(cb)) {
      return createWatcher(vm, expOrFn, cb, options)
    }
    options = options || {}
    // 将user参数设置为true 用于标志开发者watcher
    options.user = true
    // 正常的实例化watcher
    const watcher = new Watcher(vm, expOrFn, cb, options)
    // 一个值得注意的参数
    // 如果配置了immediate则在此时（vue初始化）进行调用回调cb
    if (options.immediate) {
      const info = `callback for immediate watcher "${watcher.expression}"`
      // 为啥这边要进行pushTarget呢
      // 而且target为undefined
      // 因为当前可能处于其它watcher实例化当中，例如渲染watcher
      // 如果这边不推入其它watcher得话会导致cb中得某些属性dep添加了渲染watcher
      // 则可能引起没必要得渲染watcher get执行
      pushTarget()
      invokeWithErrorHandling(cb, vm, [watcher.value], vm, info)
      popTarget()
    }
    // 移除deps解除订阅
    return function unwatchFn () {
      watcher.teardown()
    }
  }
}
复制代码

update () {
  // lazy用于computed
  if (this.lazy) {
  } else if (this.sync) {
  // 同步watcher
    this.run()
  // 异步watcher
  } else {
    queueWatcher(this)
  }
}
复制代码

export function queueWatcher (watcher: Watcher) {
  const id = watcher.id
  // 通过watcherID判断防止重复执行
  // 这里也是设计为异步的一个重要原因吧
  // 开发中肯定会存在某些修改触发同一个渲染watcher的情况
  // 通过异步队列则可以很好的防止重复，大大优化效率
  if (has[id] == null) {
    has[id] = true
    // flushing表明当前queue正在执行更新
    if (!flushing) {
      // 如果不是正在更新，则推入队列即可
      queue.push(watcher)
    } else {
      // 如果正在更新，则要对比watcherID的大小 将watcher推入正确位置
      // 这种情况是由于watcher的回调cb又通知了新的watcher更新
      let i = queue.length - 1
      while (i > index && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(i + 1, 0, watcher)
    }
    // 异步执行
    if (!waiting) {
      waiting = true
      if (process.env.NODE_ENV !== 'production' && !config.async) {
        flushSchedulerQueue()
        return
      }
      // 使用nextTick来实现异步执行 
      // 其中执行函数flushSchedulerQueue通过回调方式传递、
      // nextTick的原理以后分析 知道它是将函数添加到异步队列中就行了
      nextTick(flushSchedulerQueue)
    }
  }
}
复制代码

function flushSchedulerQueue () {
  // 这边会设置flushing=true
  // 表明当前正在执行更新
  flushing = true
  let watcher, id
  // 注意这边会将watcher进行排序
  // 和上面的排序其实是对应的，正因为上面的queueWatcher在排序之后
  // 所以才需要对比watcherID插入特定位置  
  // 这边的排序主要为了处理
  // 1. 父组件的更新总是应该先于子组件
  // 2. userWatcher总是应该先于渲染watcher
  // 3. 如果父组件已经销毁，其实不再需要执行更新
  queue.sort((a, b) => a.id - b.id)
  // 这边要注意queue.length不会通过len=queue.length的方式缓存
  // 因为queue的长度其实是实时变化的，和前面说的原因一样
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index]
    // before执行
    if (watcher.before) {
      watcher.before()
    }
    id = watcher.id
    // 重置has[id] 不然下一轮不会添加到队列了
    has[id] = null
    // 执行更新函数
    watcher.run()
  }
  // keepAlive组件
  const activatedQueue = activatedChildren.slice()
  // 用于获取普通组件 通过watcher.vm
  const updatedQueue = queue.slice()
  // 重置参数 见下文
  resetSchedulerState() 
  // 触发组件update及activated hooks
  callActivatedHooks(activatedQueue)
  callUpdatedHooks(updatedQueue)
}
复制代码

function resetSchedulerState () {
  index = queue.length = activatedChildren.length = 0
  has = {}
  waiting = flushing = false
}
复制代码