first take a look at the code example:
<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>I have looked at the source code of Vue again these two days. NextTick (cb) will put cb push into callbacks, and this.content = "after" will also flushSchedulerQueue push the execution function of watcher dependent on content to callbacks, and then flushCallbacks after the synchronization code has been executed. In that case, when the first console.log (this.$refs.box.innerHTML) in the example is executed, the content is not updated, so why output after?
< hr >to update, if I introduce Vue through the script tag, the output is before and after, but if it is run through a webpack build, the output is after.