Vue中的nextTick()的作用

<template>
    <div>
        <p ref="msgDiv">{{msg}}</p>
        <p>{{msg1}}</p>
        <p>{{msg2}}</p>
        <p>{{msg3}}</p>
        <button @click="change">修改内容</button>
    </div>
</template>


    data () {
        return {
            show: true,
            msg: '变换之前的内容',
            msg1: '',
            msg2: '',
            msg3: '',
        }
    },
  methods: {
        change () {
            this.msg = '变换之后的内容'
            this.msg1 = this.$refs.msgDiv.innerHTML
            this.$nextTick(() => {
                this.msg2 = this.$refs.msgDiv.innerHTML
            })
            this.msg3 = this.$refs.msgDiv.innerHTML
        }
    },

从图中可以得知：msg1和msg3显示的内容还是变换之前的内容，而msg2显示的内容是变换之后的。其根本原因是因为Vue中DOM更新是异步的.所以nextTick()的作用就是监听Dom更新完毕的时机.