关于 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?