关于 Vue 源码中 flushSchedulerQueue 和 nextTick 执行顺序的问题

Question

先看下代码示例：

<template>
  <div ref="box">{{content}}</div>
</template>

<script>
export default {
  data() {
    return {
      content: 'before'
    }
  },
  mounted() {
    this.nextTick(() => {
      console.log(this.$refs.box.innerHTML) // after
    })
    this.content = 'after'
    this.nextTick(() => {
      console.log(this.$refs.box.innerHTML) // after
    })
  }
}
</script>

这两天又重新看了下 Vue 的源码，nextTick(cb)会把cb push到callbacks中，而 this.content = 'after'也会把依赖content的watcher的执行函数flushSchedulerQueue push到callbacks中，接下来在同步代码执行完毕后一并flushCallbacks。这样说的话例子中第一个console.log(this.$refs.box.innerHTML)执行的时候content并未更新啊，为什么输出after呢？

---

更新一下，我通过script标签引入Vue的话，则输出是before和after，但如果通过webpack构建运行的话，则输出都是after，费解。。。

Answer 1

你第一个是after?
https://jsfiddle.net/63180768...

Answer 2

我也遇到了和楼主一样的问题，本地webpack打包起dev server，vue 版本2.6.11。