Vue.js中this.$nextTick()

刚开始学VUE搞不明白this.$nextTick()什么时候用，现在总结下我的经验this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。

this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用它的实例上。

相当于JQ 中的setTimeout，就是延迟执行，

<template>
    <button ref="tar"  @click="testClick">{{test}}</button>
</template>
 
<script>
    export default {
        data () {
            return {
                test: '我是初始值'
            }
        }
　　　　 methods: {
　　　　　　 testClick(){
　　　　　　　　 this.test= '我是改变了的值'　　　　　
　　　　　　　　 console.log(that.$refs.tar.innerText) 
　　　　　　 }
　　　　 }
    }
</script>

这时候直接打印的话，由于dom元素还没更新，因此打印出来的还是未改变之前的值,所以打印出来的结果是： 我是初始值

下面看加this.$nextTick这个方法作用是

methods：{
    testClick() {
        this.test= '我是改变了的值'
        this.$nextTick(() => {        
            console.log(that.$refs.tar.innerText) 
        })
    }
}

dom元素更新后执行，因此这里能正确打印更改之后的值 ：我是改变了的值