VUE 源码分析二之 watch 与 computed

我不是女神ヾ 2023-10-03 12:58 13阅读 0赞

watch 和 computed 的关系老生常谈，随便一搜就能搜到。那我们来深究一下到底源码中是怎么实现他们的，区别边界到底在哪里：

先看 computed:

function initComputed (vm: Component, computed: Object) {
      const watchers = vm._computedWatchers = Object.create(null)
      const isSSR = isServerRendering()
    
      for (const key in computed) {
        const userDef = computed[key]
        const getter = typeof userDef === 'function' ? userDef : userDef.get
        if (process.env.NODE_ENV !== 'production' && getter == null) {
          warn(
            `Getter is missing for computed property "${key}".`,
            vm
          )
        }
    
        if (!isSSR) {
          watchers[key] = new Watcher(
            vm,
            getter || noop,
            noop,
            computedWatcherOptions
          )
        }
    
        if (!(key in vm)) {
          defineComputed(vm, key, userDef)
        } else if (process.env.NODE_ENV !== 'production') {
          if (key in vm.$data) {
            warn(`The computed property "${key}" is already defined in data.`, vm)
          } else if (vm.$options.props && key in vm.$options.props) {
            warn(`The computed property "${key}" is already defined as a prop.`, vm)
          }
        }
      }
    }

首先初始化了空对象`watchers`,然后遍历所有的 `computed` 属性,实例化`Watcher`类，并挂载到 vm 的`_computedWatchers`同名属性上,`Watcher`类之前有讲过，不知道还大家记不记得，它的作用是订阅`Dep`类，监控并传递数据变更。接下来，判断属性是否存在于 Vue 实例上，然后执行`defineComputed`,这个方法名字是不是似曾相识，看名字就觉得跟之前的`defineReactive`应该作用相似,实际上却并不是。

还是来看看`defineComputed`的代码

function defineComputed (
      target: any,
      key: string,
      userDef: Object | Function
    ) {
      const shouldCache = !isServerRendering()
      if (typeof userDef === 'function') {
        sharedPropertyDefinition.get = shouldCache
          ? createComputedGetter(key)
          : createGetterInvoker(userDef)
        sharedPropertyDefinition.set = noop
      } else {
        sharedPropertyDefinition.get = userDef.get
          ? shouldCache && userDef.cache !== false
            ? createComputedGetter(key)
            : createGetterInvoker(userDef.get)
          : noop
        sharedPropertyDefinition.set = userDef.set || noop
      }
      if (process.env.NODE_ENV !== 'production' &&
          sharedPropertyDefinition.set === noop) {
        sharedPropertyDefinition.set = function () {
          warn(
            `Computed property "${key}" was assigned to but it has no setter.`,
            this
          )
        }
      }
      Object.defineProperty(target, key, sharedPropertyDefinition)
    }

这个里面的判断很容易就能懂，如果你传入 `computed` 的属性是一个函数，则传入的函数将直接作为该属性的 get,否则就需要自己定义。然后调用`createComputedGetter`得到返回的对象描述符，最终也是通过`Object.defineProperty`来实现。

function createComputedGetter (key) {
      return function computedGetter () {
        const watcher = this._computedWatchers && this._computedWatchers[key]
        if (watcher) {
          if (watcher.dirty) {
            watcher.evaluate()
          }
          if (Dep.target) {
            watcher.depend()
          }
          return watcher.value
        }
      }
    }

这里的`createComputedGetter`返回的是一个函数，该函数将作为 get 注册到计算属性上去。所以到这里计算属性初始化就完成了。

当 get 被触发时，才会调用`computedGetter`,通过 key 值获取到之前注册在`_computedWatchers`上的`watcher`对象。然后判断`dirty`,该属性是 watcher 类上的一个标识符，如果为 true 说明数据有变动，就需要调用`watcher.evaluate`重新计算出新的 value。最后调用`watcher.depend`。

depend () {
        let i = this.deps.length
        while (i--) {
          this.deps[i].depend()
        }
      }

`watcher`类上的 deps 是存储着`Dep`类的数组，`deoend`方法将循环数组并依此调用其`depend`方法，这个我们在上一篇讲到过，来回顾一下。

depend () {
        if (Dep.target) {
          Dep.target.addDep(this)
        }
      }

`Dep`类上的`depend`方法又会去调用`target`上面的 addDep 方法，而 target 实际上就是一个`watcher`类。

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)
          }
        }
      }

`addDep`就是把传入的`dep`对象存储到`newDeps`中，`newDeps`总是会在当前`deps`数组清空时再赋值到`deps`上。然后再调用`dep`的`addSub`,这个方法之前也说到过，会把传入进来的`watcher`类 push 到`Dep`类的观察者队列`subs`中。

`Dep`和`Watcher`两个类关系十分紧密。`Dep`中`targetStack`，`target`和`subs`存储的都是`Watcher`实例，而`Watcher`中也通过`deps`和`newDeps`存储了`Dep`类实例。

这里显得错综复杂，之前我们也没有详细的分析过`Dep`和`Watcher`之间的关系。我们可以通过`debugger`来梳理一下流程，demo 的例子如下

<body>
        <div id="demo">{
       {message1}}</div>
      </body>
      <script>
        new Vue({
          el: "#demo",
          data: {
            message: "hello",
          },
          computed: {
            message1: function () {
              return this.message + "computed";
            },
          },
          created: function () {
            setTimeout(() => {
              this.message = "change";
            }, 2000);
          },
        });

在下图位置打断点我们来统计一下`Dep`到底被实例化了多少次。

![4c53bd429cf88533d3a4bc6f965a93ee.png][]

![0554709506dbeb99795bf7801513a7ed.png][]

结果如下：

1.  `definReactive` $attr 属性时
2.  `definReactive` $listeners 属性时
3.  `initData`时,`data`实例化`Observer`类时
4.  `data`中 属性`message`实例化`Observer`类时

这表明只有`data`和`props`才会实例化`Dep`类。

同样的方式看`Watcher`类：

1.  `message1`
2.  `updateComponent`

这里只有两个`Watcher`实例，而且他们之前是强相关的，并且他们的`deps`中都只订阅了上述第四个`Deps`实例(实际上在 Vue 中他的 id 就是 4),而这个实例同时将他们都存到`subs`中。当初始化`mount`时，会直接调用`updateComponent`方法，然后执行\_render 函数生成`vnode`会触发`message1`的 get,进而执行第一个`Watcher`的`watcher.evaluate`去计算值，并缓存下来。当`setTimeout`触发`update`时，首先触发了注册在`message`属性上的 set,set 中会执行第四个`Dep`的`dep.notify`方法，这个方法会遍历他挂载的`subs`队列，并依次执行`update`方法。这里两个`Watcher`都会被执行，但是略有不同。这里涉及到`computed`的`lazy`属性，先看下代码

update () {
        /* istanbul ignore else */
        if (this.lazy) {
          this.dirty = true
        } else if (this.sync) {
          this.run()
        } else {
          queueWatcher(this)
        }
      }

如果`lazy`属性为 true,会将`dirty`属性也置为`true`，否则就会执行`queueWatcher`。

官方文档中有明确提到

![4e07d8e834566d943209efb6e6454c2b.png][]

这里所谓的缓存就是通过`lazy`与`dirty`来控制的。计算属性的`lazy`为 true,因此当它依赖的响应式属性（这里就是`message`）发生变化时，才会将`dirty`置为`true`。

function computedGetter () {
        const watcher = this._computedWatchers && this._computedWatchers[key]
        if (watcher) {
          if (watcher.dirty) {
            watcher.evaluate()
          }
          if (Dep.target) {
            watcher.depend()
          }
          return watcher.value
        }
      }

上述函数就是计算属性的 get，当触发时如果`dirty`为`true`才会重新计算，否则会直接返回之前的 value。

所以`update`时，第一个`watcher`仅仅只会将`dirty`设为`true`就会结束。真正的触发还是通过`updateComponent`触发生成`vnode`来触发 get,然后执行的，这也就解释了为什么`computed`属性不支持异步，因为它的执行实际其实是在`render`之中，如果异步，则不会显示到页面上去。

这张图比较清晰的表达了`Watcher`和`Dep`类之间的关系，作为我们第一篇文章没有讲清楚的地方的补充

![2752ec103733ac853037118ca5570f71.png][]

这里是一个标准的发布订阅模式，`Observer`类实现的 get,set 属于发布者。`Dep`是发布者与订阅者之间桥梁，用于管理订阅关系。真正的订阅者则是`Watcher`类。

然后是`watch`:

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 {
          createWatcher(vm, key, handler)
        }
      }
    }

遍历 watch 中的所有属性，如果属性值为数组，继续遍历，然后对每个值都执行`createWatcher`方法。这意味着 watch 的属性可以为数组。

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]
      }
      return vm.$watch(expOrFn, handler, options)
    }

这里判断传递进来的主体`handler`如果是对象，则进行赋值，如果是字符串，则在 vm 上获取同名属性。这又意味着我们可以传递一个挂载在 vue 上的函数作为`watch`的值。

最后调用`$watch`

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 || {}
        options.user = true
        const watcher = new Watcher(vm, expOrFn, cb, options)
        if (options.immediate) {
          try {
            cb.call(vm, watcher.value)
          } catch (error) {
            handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)
          }
        }
        return function unwatchFn () {
          watcher.teardown()
        }
      }

这里就是 new 了一个`Watcher`实例，如果传入的参数`immediate`为 true,则会立即执行监听函数，否则初始化的时候不会执行。最后返回了一个移除`watcher`的方法。

接下来的流程与`computed`相同。这里需要注意的是，watch 的 options 是可以自己传递的，比如你可以传递`deep：true`来实现深度监听。但是 computed 实例化`Watcher`时 options 不能自定义，只有一个默认存在的`lazy:true`属性表明 computed 属性是可缓存的。

在这里正好看到了一个有意思的案例分享给大家：

new Vue({
          el: "#demo",
          data: {
            message1:'init
            data:[{
              message: "hello",
            }]
          },
          watch:{
            `data[0].message`:function(val){
              this.message1 = val + 'change'
            }
          }
          created: function () {
            setTimeout(() => {
              this.data[0].message = "change";
            }, 2000);
          },
        });

如果我们`data[0].message`这样写监听，肯定是不行的，会得到一个如下的报错：

[Vue warn]: Failed watching path: "data[0].message" Watcher only accepts simple dot-delimited paths. For full control, use a function instead.

那是为什么呢？上文我们代码中可以看到，我们传递的参数是将`data[0].message`作为`expOrFn`,对应的函数作为`cb`参数传递给了`Watcher`类的构造函数了。

constructor (
        vm: Component,
        expOrFn: string | Function,
        cb: Function,
        options?: ?Object,
        isRenderWatcher?: boolean
      ) {
        this.vm = vm
        if (isRenderWatcher) {
          vm._watcher = this
        }
        vm._watchers.push(this)
        // options
        if (options) {
          this.deep = !!options.deep
          this.user = !!options.user
          this.lazy = !!options.lazy
          this.sync = !!options.sync
          this.before = options.before
        } 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
        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)
          if (!this.getter) {
            this.getter = noop
            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.lazy
          ? undefined
          : this.get()
      }

这里有个判断，`if (typeof expOrFn === 'function'` 如果 key 值是个函数，就直接复制，否则会执行`parsePath`,下面的报错和我们的报错相同。`parsePath`就是返回一个把字符串通过`.`分割然后再取值的方法，因此它没法识别数组的操作。

那除了深度监听，我们要怎么实现这个需求呢？如果`expOrFn`是一个函数，不就能跳过这个逻辑了吗。可是 watch 的 key 是字符串，怎么会是函数呢，答案就是我们自己来创建`watcher`类。之前提到`createWatcher`方法，其实最终就是执行了这样一句

vm.$watch(expOrFn, handler, options)

那我们就可以自己来挂载这个属性来实现这个效果

new Vue({
          el: "#demo",
          data: {
            message1: "init",
            data: [
              {
                message: "hello",
              },
            ],
          },
          mounted() {
            this.$watch(
              () => {
                return this.data[0].message;
              },
              (val) => {
                this.message1 = val;
              }
            );
          },
          created: function () {
            setTimeout(() => {
              this.data[0].message = "change";
            }, 2000);
          },
        });

第一个参数是一个函数返回要监听的值，第二个参数则是监听值变化之后的回调。你甚至可以同时监听多个值，然后在第二个函数中赋值给新的属性，像这样：

new Vue({
          el: "#demo",
          data: {
            firstName: "xiao",
            lastName: "ming",
            name: "",
          },
          mounted() {
            const getter = () => {
              return this.firstName + " " + this.lastName;
            };
            this.name = getter();
            this.$watch(getter, (val) => {
              this.name = val;
            });
          },
          created: function () {
            setTimeout(() => {
              this.lastName = "wang";
            }, 2000);
          },
        });

有没有发现，这看起来是不是和计算属性`computed`相似了。其实整理一下这次讲的代码，你就会发现，无论是 `computed` 和 `watch`,其实都是对每个属性都实例化`Watcher`对象来实现的，区别只在于默认的`options`不同，解析规则不同。

那么总结下来，`computed`在实现上其实与`watch`几乎一致，这可能是他们经常被拿来比较的原因。但是他们所要实现的功能，我觉得是不同的，做的并不是一件事情，你可以拿`watch`来和`filter`作比较，但是和`computed`，我认为实在没什么可比性。

这次讲的`computed`和`watch`其实还比较容易理解，但是重点是弄清楚他们工作的机理，`Watcher`类和`Dep`到底是如何工作的，这一点比较重要。然后顺带附加了正巧看见的一个例子来联系到实际场景，表明弄懂他们的机制在日常工作中对于解决一些问题还是很有帮助的。

同样的，文中有什么不对的地方，欢迎大家指出讨论。

[4c53bd429cf88533d3a4bc6f965a93ee.png]: https://img-blog.csdnimg.cn/img_convert/4c53bd429cf88533d3a4bc6f965a93ee.png
[0554709506dbeb99795bf7801513a7ed.png]: https://img-blog.csdnimg.cn/img_convert/0554709506dbeb99795bf7801513a7ed.png
[4e07d8e834566d943209efb6e6454c2b.png]: https://img-blog.csdnimg.cn/img_convert/4e07d8e834566d943209efb6e6454c2b.png
[2752ec103733ac853037118ca5570f71.png]: https://img-blog.csdnimg.cn/img_convert/2752ec103733ac853037118ca5570f71.png