vue中的this.$nextTick()使用

首先我们来翻译一下nextTick是什么意思：下一个刻度

再来看看vue官网怎么说的：

Vue.nextTick( [callback, context] )
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

大概意思就是在修改完数据后会立即调用这个方法

下面看下具体代码↓

<template>
    <div>
        <div ref="test">{{text}}</div>
        <button type="button" name="button" @click="dClick">改变我</button>
    </div>
</template>
 
<script>
    export default {
        data () {
            return {
                text: '原始的我'
            }
        }
　　　　 methods: {
　　　　　　 dClick(){
　　　　　　　　      this.text = '我变了'
                   this.$nextTick(() => {
                      // dom元素更新后执行，因此这里能正确打印更改之后的值
                      console.log(that.$refs.test.innerText) // 我变了
                　　})
　　　　　　　　     // 这时候由于dom元素还没更新，因此打印出来的还是未改变之前的值
　　　　　　　　     console.log(that.$refs.test.innerText) // 原始的我
　　　　　　 }
　　　　 }
    }
</script>