关于无限循环中的问题

Question

run () {
    if (this.active) {
      const value = this.get() 
      if (
        value !== this.value ||
        // Deep watchers and watchers on Object/Arrays should fire even
        // when the value is the same, because the value may
        // have mutated.
        isObject(value) ||
        this.deep
      ) {
        // set new value
        const oldValue = this.value
        this.value = value
        if (this.user) {
          try {
            this.cb.call(this.vm, value, oldValue)
          } catch (e) {
            handleError(e, this.vm, `callback for watcher "${this.expression}"`)
          }
        } else {
          this.cb.call(this.vm, value, oldValue)
        }
      }
    }
  }

执行到 watcher.run 函数中，会先执行 this.get()，即会执行 updateComponent 函数，导致页面重新渲染，之后才进入到 user watcher 的回调函数中，导致无限添加 watcher 到队列中，那么为什么页面没有将 msg 渲染成随机数？而是先报错？

我点击 toggle 后，随机数就显示了

Answer 1

ustbhuangyi 2020-01-05 16:38:44

因为是不断往 queue 中插入新的 user watcher，导致执行 100 次报错了，根本就没有机会执行到渲染 watcher 的 run，也就不会执行组件的重新渲染。

• 提问者 六一888 #1

  以下是我的理解，是否正确？
  执行的都是 user wathcer 的 watcher.run，因为 user watcher 会优先于渲染 watcher，所以只会执行 user watcher 的 get 函数，其中会执行user watcher 的 getter 函数，将当前 watcher 又一次 push 到 subs 中，当改变了响应数据的值后，会执行响应数据的 setter 函数，又一次执行到了 queueWatcher 函数，如此循环往复，执行到 100 次的限定条件后，就报错，所以没有渲染 watcher 什么事了。

• ustbhuangyi 回复 提问者 六一888 #2

  理解有问题，user watcher 始终是同一个，只不过会不断被推到 queue，watcher.run() 这个过程并不会触发 msg 的 getter，也不会 push subs。

• 提问者 六一888 回复 ustbhuangyi #3

  那这就不懂了，当执行 user watcher 的 run 时，const value = this.get() 这个执行的是什么？难道不是执行了 watcher.get 函数么？get 函数中执行了 getter 函数，难道不就是将当前 watcher push 到 subs 中么？并且还清除了这个依赖，如果不重新推送到 subs 中，那么推送到 queue 的 watcher 从哪里来？

点开查看后面2条评论