关于无限循环中的问题

来源:4-8 派发更新(下)

六一888

2020-01-05

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 后,随机数就显示了

写回答

1回答

ustbhuangyi

2020-01-05

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

0
5
六一888
非常感谢!
2020-01-08
共5条回复

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4984 学习 · 1037 问题

查看课程