nextTick如何使用

1.$nextTick()函数的定义：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

通俗化来讲：就是对于我们从js中修改了DOM绑定的数值，然后虽然页面上DOM的数值发生了改变，但是我们从方法里面中获取dom的数值并没有发生改变，这时候就需要nextTick()函数来帮助我们在方法里面及时获得更新后的DOM的数值！！

举个例子：

<template>
    <div>
        <h1 ref="hello">{{ value }}</h1>
        <button @click = "getll()" >改变数值</button>
        <el-button @click = "elButton">el-button</el-button>
        <!--<el-button  @click="getll()">点击</el-button>-->

    </div>
</template>

<script>
    export default {

        data() {
            return {
                value: "Hello World ~",
            }
        },
        methods:{
            elButton(){
                console.log("测试方法过来了没")
            },
            TestThis(){
                console.log(this.TestFilter())
            },
            getll() {

                this.value = "你好啊";
                console.log("同步获取数值");
                console.log(this.$refs["hello"].innerText); // Hello World ~
                // 如果直接这样打印，打印出来的结果不是我们想要的  "你好啊";，而是 Hello World ~，因为this.value = ‘ Hello World ~’ 它是异步的
                this.$nextTick(() => {
                    console.log("nextTick获取数值");
                    console.log(this.$refs["hello"].innerText); // 你好啊
                });
                console.log("测试异步获取完成后的数值"); // Hello World ~
                console.log(this.$refs["hello"].innerText); // Hello World ~

           }
        }

    }
</script>

<style scoped>

</style>

（1）初始页面：

（2）点击改变数值后：

注意观察控制台的打印信息：当我们在nextTick()函数中的绑定的数值会立即获取到，不在这个函数内的两个输出语句度无法获取到更新的DOM对象，因此它的用处已经很明显了！！
大家可以试一下，了解一下怎么用的就可以了！！具体原理大家可以继续百度！！