watcher

Watcher类的实现比较复杂，因为他的实例分为渲染 watcher（render-watcher）、计算属性 watcher（computed-watcher）、侦听器 watcher（normal-watcher）三种，
这三个实例分别是在三个函数中构建的：mountComponent 、initComputed和Vue.prototype.$watch。

normal-watcher

我们在组件钩子函数watch 中定义的，都属于这种类型，即只要监听的属性改变了，都会触发定义好的回调函数，这类watch的expression是我们写的回调函数的字符串形式。

computed-watcher

我们在组件钩子函数computed中定义的，都属于这种类型，每一个 computed 属性，最后都会生成一个对应的 watcher 对象，但是这类 watcher 有个特点：当计算属性依赖于其他数据时，属性并不会立即重新计算，只有之后其他地方需要读取属性的时候，它才会真正计算，即具备 lazy（懒计算）特性。这类watch的expression是计算属性中的属性名。

render-watcher

每一个组件都会有一个 render-watcher, 当 data/computed 中的属性改变的时候，会调用该 render-watcher 来更新组件的视图。这类watch的expression是function () {vm._update(vm._render(), hydrating);}。

除了功能上的区别，这三种 watcher 也有固定的执行顺序，分别是：computed-render -> normal-watcher -> render-watcher。
这样安排是有原因的，这样就能尽可能的保证，在更新组件视图的时候，computed 属性已经是最新值了，如果 render-watcher 排在 computed-render 前面，就会导致页面更新的时候 computed 值为旧数据。

observer/watcher.js - 图1

  1. //lifecycle.js
  2. new Watcher(vm, updateComponent, noop, {
  3.   before () {
  4.     if (vm._isMounted && !vm._isDestroyed) {
  5.       callHook(vm, 'beforeUpdate')
  6.     }
  7.   }
  8. }, true /* isRenderWatcher */)
  1. /* @flow */
  3. import {
  4.   warn,
  5.   remove,
  6.   isObject,
  7.   parsePath,
  8.   _Set as Set,
  9.   handleError,
  10.   noop
  11. } from '../util/index'
  13. import { traverse } from './traverse'
  14. import { queueWatcher } from './scheduler'
  15. import Dep, { pushTarget, popTarget } from './dep'
  17. import type { SimpleSet } from '../util/index'
  19. let uid = 0
  21. /**
  22.  * A watcher parses an expression, collects dependencies,
  23.  * and fires callback when the expression value changes.
  24.  * This is used for both the $watch() api and directives.
  25.  */
  27. /*
  28.  *  一个解析表达式，进行依赖收集的观察者，
  29.  *  同时在表达式数据变更时触发回调函数。
  30.  *  它被用于$watch() api以及指令
  31.  */
  33. // 当是渲染watcher时，expOrFn是updateComponent，即重新渲染执行render（_update）
  34. // 当是计算watcher时，expOrFn是计算属性的计算方法
  35. // 当是侦听器watcher时，expOrFn是watch属性的名字，this.cb就是watch的handler属性
  37. // 对于渲染watcher和计算watcher来说，expOrFn的值是一个函数，可以直接设置getter
  38. // 对于侦听器watcher来说，expOrFn是watch属性的名字，会使用parsePath函数解析路径，获取组件上该属性的值（运行getter）
  40. /*
  41. * 需要特别注意的是，在一个组件中，也就是一个vue实例内，
  42. * 只有一个render watcher
  43. * 也就是说一个组件内的变量改变导致dom更新，触发的都是同一个render watcher
  44. * computed的watcher，则会在this._computedWatchers中
  45. * */
  46. export default class Watcher {
  47.   vm: Component;
  48.   expression: string;
  49.   cb: Function;
  50.   id: number;
  51.   deep: boolean;
  52.   user: boolean;
  53.   lazy: boolean;
  54.   sync: boolean;
  55.   dirty: boolean;
  56.   active: boolean;
  57.   deps: Array<Dep>;
  58.   newDeps: Array<Dep>;
  59.   depIds: SimpleSet;
  60.   newDepIds: SimpleSet;
  61.   before: ?Function;
  62.   getter: Function;
  63.   value: any;
  65.   constructor (
  66.     vm: Component,
  67.     expOrFn: string | Function,
  68.     cb: Function,
  69.     options?: ?Object,
  70.     isRenderWatcher?: boolean
  71.   ) {
  72.     this.vm = vm
  73.     if (isRenderWatcher) {
  74.       vm._watcher = this
  75.     }
  76.     /*_watchers存放订阅者实例*/
  77.     vm._watchers.push(this)
  78.     // options
  79.     if (options) {
  80.       this.deep = !!options.deep //是否启用深度监听
  81.       this.user = !!options.user //主要用于错误处理，侦听器 watcher的 user为true，其他基本为false
  82.       this.lazy = !!options.lazy //惰性求值，当属于计算属性watcher时为true
  83.       this.sync = !!options.sync //标记为同步计算，三大类型暂无
  84.       this.before = options.before
  85.     } else {
  86.       this.deep = this.user = this.lazy = this.sync = false
  87.     }
  88.     this.cb = cb
  89.     this.id = ++uid // uid for batching
  90.     this.active = true
  91.     this.dirty = this.lazy // for lazy watchers
  92.     this.deps = []
  93.     this.newDeps = []
  94.     this.depIds = new Set()
  95.     this.newDepIds = new Set()
  96.     this.expression = process.env.NODE_ENV !== 'production'
  97.       ? expOrFn.toString()
  98.       : ''
  99.     // parse expression for getter
  100.     // 解析expOrFn，赋值给this.getter
  101.     if (typeof expOrFn === 'function') {
  102.       this.getter = expOrFn
  103.     } else {
  104.       /* 把表达式expOrFn解析成getter */
  105.       this.getter = parsePath(expOrFn)
  106.       if (!this.getter) {
  107.         this.getter = noop
  108.         process.env.NODE_ENV !== 'production' && warn(
  109.           `Failed watching path: "${expOrFn}" ` +
  110.           'Watcher only accepts simple dot-delimited paths. ' +
  111.           'For full control, use a function instead.',
  112.           vm
  113.         )
  114.       }
  115.     }
  116.     this.value = this.lazy ?
  117.       undefined :
  118.       this.get()
  119.     // 当为computed属性时，lazy为true，
  120.     // 这时不会在new Watcher()执行get函数，即为惰性求值
  121.     // 其他的时候都会在实例化时执行get，进行依赖收集
  123.   }
  125.   /**
  126.    * Evaluate the getter, and re-collect dependencies.
  127.    */
  128.   get() {
  129.     pushTarget(this) // 将当前watcher实例放入Dep.target中
  130.     let value
  131.     const vm = this.vm
  132.     try {
  133.       value = this.getter.call(vm, vm)
  134.       // 执行getter函数即是获取了一次observer中的值
  135.       // 触发了observer的get中的dep.depend()
  136.       // 将Dep.target的watcher实例push到dep.subs中
  137.     } catch (e) {
  138.       if (this.user) {
  139.         // user为true，那即是侦听器watch
  140.         // 如果是watch的值不存在或有问题
  141.         handleError(e, vm, `getter for watcher "${this.expression}"`)
  142.       } else {
  143.         throw e
  144.       }
  145.     } finally {
  146.       // "touch" every property so they are all tracked as
  147.       // dependencies for deep watching
  148.       /*如果存在deep，则触发每个深层对象的依赖，追踪其变化*/
  149.       if (this.deep) {
  150.         // 深度监听，就是watch的deep选项
  151.         /*递归每一个对象或者数组，
  152.          *触发它们的getter，
  153.          *使得对象或数组的每一个成员都被依赖收集，
  154.          *形成一个“深（deep）”依赖关系
  155.         */
  156.         traverse(value)
  157.       }
  158.       popTarget()
  159.       this.cleanupDeps()
  160.     }
  161.     return value
  162.   }
  164.   /**
  165.    * Add a dependency to this directive.
  166.    */
  167.   /*添加一个依赖关系到Deps集合中*/
  168.   addDep(dep: Dep) {
  169.     const id = dep.id
  170.     if (!this.newDepIds.has(id)) {
  171.       // 同时实例中也会保存添加过当前实例的dep和dep的id
  172.       this.newDepIds.add(id)
  173.       this.newDeps.push(dep)
  174.       if (!this.depIds.has(id)) {
  175.         dep.addSub(this)
  176.       }
  177.     }
  178.   }
  180.   /**
  181.    * Clean up for dependency collection.
  182.    */
  183.   /*清理依赖收集*/
  184.   cleanupDeps() {
  185.     let i = this.deps.length
  186.     while (i--) {
  187.       const dep = this.deps[i]
  188.       if (!this.newDepIds.has(dep.id)) {
  189.         dep.removeSub(this)
  190.       }
  191.     }
  192.     let tmp = this.depIds
  193.     this.depIds = this.newDepIds
  194.     this.newDepIds = tmp
  195.     this.newDepIds.clear()
  196.     tmp = this.deps
  197.     this.deps = this.newDeps
  198.     this.newDeps = tmp
  199.     this.newDeps.length = 0
  200.   }
  202.   /**
  203.    * Subscriber interface.
  204.    * Will be called when a dependency changes.
  205.    */
  206.   /*
  207.       调度者接口，
  208.       当依赖发生改变的时候进行回调。
  209.    */
  210.   update() {
  211.     /* istanbul ignore else */
  212.     if (this.lazy) {
  213.       // 脏值标记
  214.       this.dirty = true
  215.     } else if (this.sync) {
  216.       /*同步则执行run直接渲染视图*/
  217.       this.run()
  218.     } else {
  219.       /*异步推送到观察者队列中，由调度者调用。*/
  220.       queueWatcher(this)
  221.     }
  222.   }
  224.   /**
  225.    * Scheduler job interface.
  226.    * Will be called by the scheduler.
  227.    */
  228.   /*
  229.       调度者工作接口，将被调度者回调。
  230.   */
  231.   run() {
  232.     if (this.active) {
  233.       const value = this.get()
  234.       if (
  235.         value !== this.value ||
  236.         // Deep watchers and watchers on Object/Arrays should fire even
  237.         // when the value is the same, because the value may
  238.         // have mutated.
  239.         // 即便值相同，拥有Deep属性的观察者以及在对象／数组上的观察者应该被触发更新，
  240.         // 因为它们的值可能发生改变。
  241.         isObject(value) ||
  242.         this.deep
  243.       ) {
  244.         // set new value
  245.         const oldValue = this.value
  246.         /*设置新的值*/
  247.         this.value = value
  248.         if (this.user) {
  249.           // user 为真时，使用了侦听者watch
  250.           try {
  251.             this.cb.call(this.vm, value, oldValue)
  252.           } catch (e) {
  253.             handleError(e, this.vm, `callback for watcher "${this.expression}"`)
  254.           }
  255.         } else {
  256.           /*触发回调渲染视图*/
  257.           this.cb.call(this.vm, value, oldValue)
  258.         }
  259.       }
  260.     }
  261.   }
  263.   /**
  264.    * Evaluate the value of the watcher.
  265.    * This only gets called for lazy watchers.
  266.    */
  267.   /*获取观察者的值
  268.    * 只会被用于惰性求值的观察者
  269.   * */
  270.   evaluate() {
  271.     this.value = this.get()
  272.     // 用于标记脏数据的变量
  273.     this.dirty = false
  274.   }
  276.   /**
  277.    * Depend on all deps collected by this watcher.
  278.    */
  279.   /*收集该watcher的所有deps依赖*/
  280.   depend() {
  281.     let i = this.deps.length
  282.     while (i--) {
  283.       this.deps[i].depend()
  284.     }
  285.   }
  287.   /**
  288.    * Remove self from all dependencies' subscriber list.
  289.    */
  290.   /* 将自身从所有依赖收集订阅列表删除 */
  291.   teardown() {
  292.     if (this.active) {
  293.       // remove self from vm's watcher list
  294.       // this is a somewhat expensive operation so we skip it
  295.       // if the vm is being destroyed.
  296.       // 将self从vm的watcher列表中移除，
  297.       // 这是一个有点耗时的操作，
  298.       // 所以如果vm正在被销毁，我们就跳过它。
  299.       // 从watcher列表移除自身
  300.       if (!this.vm._isBeingDestroyed) {
  301.         remove(this.vm._watchers, this)
  302.       }
  303.       let i = this.deps.length
  304.       while (i--) {
  305.         this.deps[i].removeSub(this)
  306.       }
  307.       this.active = false
  308.     }
  309.   }
  310. }