关于Vue计算属性的原理我们在另一篇文章中已经进行了解析，想了解的可以点击这里。下面我们从源码角度来分析Vue watch的原理。

watch

watch属性是在initState阶段初始化的，我们直接看源码：

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  ......
  // 定义了watch，执行initWatch
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

initWatch

function initWatch (vm: Component, watch: Object) {
  // 遍历watch对象
  for (const key in watch) {
    // 取值
    const handler = watch[key]
    // Vue支持watch的同一个key对应多个handler
    if (Array.isArray(handler)) {
      for (let i = 0; i < handler.length; i++) {
        createWatcher(vm, key, handler[i])
      }
    } else {
      // 如果handler是对象或者函数
      createWatcher(vm, key, handler)
    }
  }
}

不论watch定义的是对象还是数组，都需要执行createWatcher：

function createWatcher (
  vm: Component,
  expOrFn: string | Function,
  handler: any,
  options?: Object
) {
  // 如果handler是一个普通对象
  if (isPlainObject(handler)) {
    // 对象赋值给options
    options = handler
    // 普通对象上需要定义handler，将对象上的handler属性赋值给handler
    handler = handler.handler
  }
  if (typeof handler === 'string') {
    // 如果传入的string类型，将当前实例的handler属性赋值给handler
    handler = vm[handler]
  }
  // 如果handler是函数，不用处理，直接执行下面的方法
  return vm.$watch(expOrFn, handler, options)
}

$watch： $watch可以全局调用，这里分析组件内定义的场景

// $watch可以全局调用
Vue.prototype.$watch = function (
  expOrFn: string | Function, // key
  cb: any, // handler函数
  options?: Object
): Function {
  const vm: Component = this
  if (isPlainObject(cb)) {
    // 是普通对象进入这个逻辑，为全局调用设计
    return createWatcher(vm, expOrFn, cb, options)
  }
  options = options || {}
  // user为true，所以后面实例化的watch称为user Watcher，
  options.user = true
  // 实例化watcher new Watcher(vm, key, handler, options)
  const watcher = new Watcher(vm, expOrFn, cb, options)
  // 如果定义了immediate，立即执行handler函数
  if (options.immediate) {
    cb.call(vm, watcher.value)
  }
  // 返回unwatchFn函数
  return function unwatchFn () {
    watcher.teardown()
  }
}

user Watcher

下面我们看下实例化user Watcher：

export default class Watcher {
  ......

  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    ......
    vm._watchers.push(this)
    // options
    if (options) {
      // 深度监听
      this.deep = !!options.deep
      // user watcher
      this.user = !!options.user
      ......
      // 同步执行
      this.sync = !!options.sync
      ......
    }
    ......
    this.cb = cb
    this.id = ++uid // uid for batching
    this.active = true
    ...
    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 {
      // string
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = function () {}
        process.env.NODE_ENV !== 'production' && warn(
          `Failed watching path: "${expOrFn}" ` +
          'Watcher only accepts simple dot-delimited paths. ' +
          'For full control, use a function instead.',
          vm
        )
      }
    }
    
    this.value = this.get()
  }
}

parsePath 的作用

parsePath是解析对象路径，watch的key支持'xx.xx.xx'的格式：

/**
 * Parse simple path.
 */
const bailRE = /[^\w.$]/
export function parsePath (path: string): any {
  if (bailRE.test(path)) {
    // 如果匹配以上正则，以.结尾，直接返回
    return
  }
  const segments = path.split('.')
  return function (obj) {
    for (let i = 0; i < segments.length; i++) {
      // 如果不是对象，返回
      if (!obj) return
      // 查找深层对象属性
      obj = obj[segments[i]]
    }
    return obj
  }
}

执行this.get():

/**
 * Evaluate the getter, and re-collect dependencies.
 */
get () {
  // this指向当前的user Watcher
  pushTarget(this)
  let value
  const vm = this.vm
  try {
    // 访问定义的属性值，触发属性值的getter，收集user Watcher这个订阅者
    value = this.getter.call(vm, vm)
  } catch (e) {
    if (this.user) {
      handleError(e, vm, `getter for watcher "${this.expression}"`)
    } else {
      throw e
    }
  } finally {
    // "touch" every property so they are all tracked as
    // dependencies for deep watching
    // 如果定义了deep深度监听，触发该逻辑，会递归访问所有属性，收集user Watcher订阅者
    if (this.deep) {
      traverse(value)
    }
    popTarget()
    this.cleanupDeps()
  }
  return value
}

deep 的原理

const seenObjects = new Set()

/**
 * Recursively traverse an object to evoke all converted
 * getters, so that every nested property inside the object
 * is collected as a "deep" dependency.
 * 递归遍历一个对象以调用所有子属性的getter，以便对象内的每个嵌套属性都作为“深度”依赖项收集。
 */
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)) {
      // seen中如果已经存在dep的id，直接返回，没有则添加
      return
    }
    seen.add(depId)
  }
  if (isA) {
    // 如果是数组
    i = val.length
    // 遍历数组，递归执行_traverse
    while (i--) _traverse(val[i], seen)
  } else {
    // 如果是对象，递归执行_traverse
    keys = Object.keys(val)
    i = keys.length
    while (i--) _traverse(val[keys[i]], seen)
  }
}

set是字典结构，可以理解为不含重复值的数组结构。traverse这个函数的作用，就是深度遍历这个对象，访问到对象上的所有值，访问到值的过程中，会触发值的getter函数，以收集这个user Watcher订阅者。这样，当深层次对象变化的时候，就会通知这个user Watcher做更新。

sync 的原理

当我们改变页面依赖的响应式数据的时候，页面的render Watcher会更新，其实这是个异步的过程，不了解的可以点击这里，参考这篇文章。

当依赖发生变化，通知watcher更新的时候，会执行Watcher的update：

// 定义在Watcher类中
/**
* Subscriber interface.
* Will be called when a dependency changes.
*/
update () {
  /* istanbul ignore else */
  // 判断是否是计算属性Watcher
  if (this.computed) {
    ......
  } else if (this.sync) {
    // 自定义Watcher中定义了sync（同步）会进入这个逻辑
    this.run()
  } else {
    // 未设置sync会进入队列，nextTick的时候执行
    queueWatcher(this)
  }
}

可以看到，当我们定义了sync属性，user watcher就可以直接同步更新，不需要进入nextTick。

总结

• watch中的属性可以以数组的形式，定义多个handler函数；
• user Watcher会在实例化Watcher求值的时候，访问属性值，以收集user Watcher作为订阅者；
• 定义了deep，会在实例化Watcher求值的时候，递归访问对象的所有深层属性值，以收集user Watcher作为订阅者；
• 定义了sync，在属性值变化触发user Watcher更新的时候，直接同步执行定义handler函数，不会放入nextTick中去执行；
• 定义了immediate，实例化Watcher之后，会立即触发定义的handler函数；