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