1. let uid = 0
    3. /**
    4.  * A watcher parses an expression, collects dependencies,
    5.  * and fires callback when the expression value changes.
    6.  * This is used for both the $watch() api and directives.
    7.  */
    8. export default class Watcher {
    9.   vm: Component; // 所处在的 Vue 实例
    10.   expression: string; // 在非生产环境下该属性的值为表达式(expOrFn)的字符串表示，在生产环境下其值为空字符串
    11.   cb: Function; // 被观察者发生变化后的响应回调
    12.   id: number; // Watcher 的 id，根据实例化的时机按顺序递增
    13.   deep: boolean; // 用来告诉当前观察者实例对象是否是深度观测，在编写 watch 就有此选项，用于决定是否深度观测这个值，默认为 false
    14.   user: boolean; // 用来标识当前观察者实例对象是 开发者定义的 还是 内部定义的，前者是 options 中的 watch 和 $watch，后者是渲染函数的观察者、计算属性的观察者等
    15.   lazy: boolean; // computed 时用到，用来标识当前观察者实例对象是否是计算属性的观察者
    16.   sync: boolean; // 用来告诉观察者当数据变化时是否同步求值并执行回调，一般情况下不会选择同步，一般是选择异步来计算
    17.   dirty: boolean; // 当 lazy 为 true 时才会有效，代表当前的值是否是同步的
    18.   active: boolean; // 它标识着该观察者实例对象是否是激活状态
    19.   deps: Array<Dep>; // 当前 Watcher 所在的 Dep 集合
    20.   newDeps: Array<Dep>; // 用于缓存最新依赖收集过程中当前 Watch 所在的 Dep 集合，会与旧的 Dep 集合对比，进行相应的依赖增改，提高性能和一致性，在每次依赖收集结束后会清空
    21.   depIds: SimpleSet; // 当前 Watcher 所在的 Dep 的 id 集合
    22.   newDepIds: SimpleSet; // 用于缓存最新依赖收集过程中当前 Watch 所在的 Dep 集合，会与旧的 Dep 集合对比，进行相应的依赖增改，提高性能和一致性，在每次依赖收集结束后会清空
    23.   before: ?Function; // 可以理解为 Watcher 实例的钩子，当数据变化之后，触发更新之前，调用在创建渲染函数的观察者实例对象时传递的 before 选项
    24.   getter: Function; // 触发依赖收集的开启函数，如果是组件的 Watcher，存放的就是渲染函数，如果是 watch 或者 $watch，则存放的是获取监听的值的函数，如果是 computed，则放的是计算函数
    25.   value: any; // watch 的值，或者 computed 的结果（可能非最新）
    27.   constructor (
    28.     vm: Component, // vue 实例
    29.     expOrFn: string | Function, // 要观察的表达式或者函数
    30.     cb: Function, // 响应的回调函数
    31.     options?: ?Object, // 传给当前观察者对象的一些参数
    32.     isRenderWatcher?: boolean // 标识该观察者实例是否是渲染函数的观察者
    33.   ) {
    34.     this.vm = vm // 观察者所在的实例
    35.     if (isRenderWatcher) {
    36.       vm._watcher = this // 如果是作为实例的渲染函数的观察者，则将当前观察者对象赋值到 _watcher
    37.     }
    38.     vm._watchers.push(this) // 将当前观察者对象添加所在实例的观察者队列里
    40.     // 参数初始化
    41.     if (options) {
    42.       this.deep = !!options.deep
    43.       this.user = !!options.user
    44.       this.lazy = !!options.lazy
    45.       this.sync = !!options.sync
    46.       this.before = options.before
    47.     } else {
    48.       this.deep = this.user = this.lazy = this.sync = false
    49.     }
    50.     this.cb = cb
    51.     this.id = ++uid // uid for batching
    52.     this.active = true
    53.     this.dirty = this.lazy // for lazy watchers
    54.     this.deps = []
    55.     this.newDeps = []
    56.     this.depIds = new Set()
    57.     this.newDepIds = new Set()
    58.     this.expression = process.env.NODE_ENV !== 'production'
    59.       ? expOrFn.toString()
    60.       : ''
    62.     // expOrFn 初始化，最终都会转成一个 function
    63.     // 如果 expOrFn 是函数则不必多说，如果是 string，则返回一个用于取该键值的函数 function(obj) {return obj[keyPath]}
    64.     if (typeof expOrFn === 'function') {
    65.       this.getter = expOrFn
    66.     } else {
    67.       // 返回取键值的函数，同时支持 'a.b.c'，这类键值，但如果 exp 不符合键值的规则，则会返回一个 undefined
    68.       this.getter = parsePath(expOrFn)
    70.         // 如果 exp 不符合键值的规则，则将 getter 赋一个空函数，同时抛出错误
    71.       if (!this.getter) {
    72.         this.getter = noop
    73.         process.env.NODE_ENV !== 'production' && warn(
    74.           `Failed watching path: "${expOrFn}" ` +
    75.           'Watcher only accepts simple dot-delimited paths. ' +
    76.           'For full control, use a function instead.',
    77.           vm
    78.         )
    79.       }
    80.     }
    81.     // https://github.com/vuejs/vue/issues/7767 computed
    82.     // https://github.com/vuejs/vue/issues/8446 back to lazy
    83.     // 如果是惰性的则返回 undefined 反之直接获取一次，获取 exp 对应的值，或者执行以下传进来的 expOrFn
    84.     this.value = this.lazy
    85.       ? undefined
    86.       : this.get()
    87.   }
    89.   /**
    90.    * Evaluate the getter, and re-collect dependencies.
    91.    */
    92.     // 
    93.     // 获取对应的值，或者触发对应的函数来获取其中的值来触发依赖收集
    94.   get () {
    95.     // Dep.target = 当前的 Watcher
    96.     pushTarget(this)
    97.     let value
    98.     const vm = this.vm
    99.     try {
    100.       value = this.getter.call(vm, vm)
    101.     } catch (e) {
    102.       if (this.user) {
    103.         handleError(e, vm, `getter for watcher "${this.expression}"`)
    104.       } else {
    105.         throw e
    106.       }
    107.     } finally {
    108.       // "touch" every property so they are all tracked as
    109.       // dependencies for deep watching
    110.       // 如果是深度的，怎深度遍历 value，触发其深层值的 get，收集依赖
    111.       if (this.deep) {
    112.         traverse(value)
    113.       }
    114.       // 将当前的 Watcher 推出 target 队列
    115.       popTarget()
    116.       // 清楚一次性的 Dep 收集
    117.       this.cleanupDeps()
    118.     }
    119.     return value
    120.   }
    122.   /**
    123.    * Add a dependency to this directive.
    124.    */
    125.     // 触发被监听值的 get 后，触发依赖收集之后会到此处开始收集
    126.   addDep (dep: Dep) {
    127.     // 获取对应 Dep 集合的id
    128.     const id = dep.id
    129.     // 如果在本次 get 中收集过了则不再收集，反之收集
    130.     if (!this.newDepIds.has(id)) {
    131.       // 收集 ID
    132.       this.newDepIds.add(id)
    133.       // 收集 Dep 实例
    134.       this.newDeps.push(dep)
    135.       // 相较于 newDepIds，depIds 是真正长期有效的
    136.       // newDepIds, 仅在一次 get 中有效
    137.       if (!this.depIds.has(id)) {
    138.         dep.addSub(this)
    139.       }
    140.     }
    141.   }
    143.   /**
    144.    * Clean up for dependency collection.
    145.    */
    146.     // 校准 Dep，使得依赖关系保持一致性
    147.   cleanupDeps () {
    148.     let i = this.deps.length
    149.     while (i--) {
    150.       const dep = this.deps[i]
    151.       // 移除上一次收集到当前 Watcher，但本次没有收集到的 Dep
    152.       if (!this.newDepIds.has(dep.id)) {
    153.         dep.removeSub(this)
    154.       }
    155.     }
    156.     // 将最新的依赖关系覆盖之前的依赖关系
    157.     let tmp = this.depIds
    158.     this.depIds = this.newDepIds
    159.     this.newDepIds = tmp
    160.     this.newDepIds.clear()
    162.     tmp = this.deps
    163.     this.deps = this.newDeps
    164.     this.newDeps = tmp
    165.     this.newDeps.length = 0
    166.   }
    168.   /**
    169.    * Subscriber interface.
    170.    * Will be called when a dependency changes.
    171.    */
    172.     // Dep.notify 将触发的更新函数
    173.   update () {
    174.     /* istanbul ignore else */
    175.     // 如果获取值的惰性的（computed），则修改值的状态为非最新值
    176.     // 初次之外如果是同步更新的条件下，则直接进行对应的响应更新
    177.     // 如果是正常的异步更新的条件下，则将当前 Watcher 添加到异步更新的 Watcher 队列中
    178.     if (this.lazy) {
    179.       this.dirty = true
    180.     } else if (this.sync) {
    181.       this.run()
    182.     } else {
    183.       queueWatcher(this)
    184.     }
    185.   }
    187.   /**
    188.    * Scheduler job interface.
    189.    * Will be called by the scheduler.
    190.    */
    191.     // 状态更新后，执行的响应式操作
    192.   run () {
    193.     // 如果当前 Watcher 还处于激活状态，才继续
    194.     if (this.active) {
    195.       // 获取更新后的值，get 会触发依赖收集
    196.       // 如果是组件的 Watcher 则会触发渲染更新，返回空，
    197.       // 如果是 普通的 watch，则会尝试获取值，返回对应的值
    198.       // 如果是 computed，则会进行计算返回对应的值
    199.       const value = this.get()
    201.       // 如果值不相等，或者即使值相同，深度观察者和对象/数组上的观察者也应触发，因为该值可能已发生变化。
    202.       if (
    203.         value !== this.value ||
    204.         // Deep watchers and watchers on Object/Arrays should fire even
    205.         // when the value is the same, because the value may
    206.         // have mutated.
    207.         isObject(value) ||
    208.         this.deep
    209.       ) {
    210.         // 设置新的值
    211.         const oldValue = this.value
    212.         this.value = value
    214.         // 执行回调函数
    215.         // 如果当前的 Watcher 是又开发者自定义的，比如 $watch, watch, computed，则加上 try catch 来捕获这可能的错误
    216.         if (this.user) {
    217.           try {
    218.             this.cb.call(this.vm, value, oldValue)
    219.           } catch (e) {
    220.             handleError(e, this.vm, `callback for watcher "${this.expression}"`)
    221.           }
    222.         } else {
    223.           this.cb.call(this.vm, value, oldValue)
    224.         }
    225.       }
    226.     }
    227.   }
    229.   /**
    230.    * Evaluate the value of the watcher.
    231.    * This only gets called for lazy watchers.
    232.    */
    233.   evaluate () {
    234.     this.value = this.get()
    235.     this.dirty = false
    236.   }
    238.   /**
    239.    * Depend on all deps collected by this watcher.
    240.    */
    241.   depend () {
    242.     let i = this.deps.length
    243.     while (i--) {
    244.       this.deps[i].depend()
    245.     }
    246.   }
    248.   /**
    249.    * Remove self from all dependencies' subscriber list.
    250.    */
    251.     // 取消监听
    252.   teardown () {
    253.     // 如果当前 watcher 实例属于活跃状态才进行取消监听
    254.     if (this.active) {
    255.       // remove self from vm's watcher list
    256.       // this is a somewhat expensive operation so we skip it
    257.       // if the vm is being destroyed.
    258.       // 如果当前 vue 实例已经被销毁了则跳过移除，因为移除操作十分消耗性能
    259.       if (!this.vm._isBeingDestroyed) {
    260.         remove(this.vm._watchers, this)
    261.       }
    263.       // 通知对应的 Deps 移除自身
    264.       let i = this.deps.length
    265.       while (i--) {
    266.         this.deps[i].removeSub(this)
    267.       }
    268.       // 将当前 watcher 设置为不活跃状态
    269.       this.active = false
    270.     }
    271.   }
    272. }