SOURCE

var vm = new Vue({
    el: "#tick",
    data: {
        msg: 123
    },
    methods: {
        updateMsg() {
            this.msg = 456;
            console.log("first_this.msg",this.msg)
            console.log("first_this.$refs.msg.textContent", this.$refs.msg.textContent)
            this.$nextTick(() => {
                console.log("first_nextTick", this.$refs.msg.textContent)
            })

            for (let i=0; i < 5000; i++) {
                console.log('i')
            }

            this.msg = 789;
            console.log("second_this.msg",this.msg)
            console.log("second_this.$refs.msg.textContent", this.$refs.msg.textContent)
            this.$nextTick(() => {
                console.log("second_nextTick", this.$refs.msg.textContent)
            })
        }
    }
})

<div id="tick">
    <p ref="msg">{{ msg }}</p>
    <button @click="updateMsg">更新msg</button>
</div>

<!-- 
Vue异步执行 DOM 更新。

当观察到数据变化，Vue 会开启一个队列，用来缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。然后，在下一个的事件循环前的“tick”中，Vue 再使用刷新后队列中的数据去执行渲染工作。这种使用队列并在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的，很大的提升了页面性能。

-->