this.$nextTick的使用及原理

1. 基本使用

        nextTick接收一个回调函数作为参数，它的作用是将回调延迟到DOM更新并渲染到页面上之后执行。当更新了状态（数据）后需要对新DOM做一些操作，但是这时我们其实获取不到更新后的DOM（具体原因后面会讲）。

<template>
    <div>
       <div ref="next">{{ message }}</div>
       <button @click="change">按钮</button>
    </div>
</template>
<script>
export default {
    name: "NextTick",
    data() {
        return {
            message: "你好",
        }
    },
    methods: {
        change() {
            this.message = "changed"; //更新和渲染DOM的回调被推送到微任务队列中
            console.log(this.$refs.next.innerHTML); // 你好
            this.$nextTick(() => { // 回调被推送到微任务队列中
                // 对更新后的DOM进行操作
                 console.log(this.$refs.next.innerHTML); // changed
            });
            console.log(this.$refs.next.innerHTML); // 你好
        }
    }
 }
 </script>

        数据改变后，DOM更新并渲染到页面上是什么时候呢？其实更新并渲染DOM和nextTick都是被推送到微任务队列中异步执行的，了解Event Loop的同学都知道，js代码是同步代码执行完之后再去执行异步代码中微任务队列中的代码，最后再去执行宏任务队列中的代码。这就是在18和23行this.$refs.next.innerHTML获取不到更新后的DOM的原因了，因为18和23行是同步代码先于this.$nextTick中回调的执行。

2. 注意

        修改数据的操作(即17行)要在this.$nextTick之前进行，因为更新渲染DOM和nextTick的回调都是被放到微任务队列中，而微任务队列中的任务是先进先执行，如果this.$nextTick在修改数据之前，nextTick的回调先进入微任务队列中,那么回调中获取的还是更新前的DOM。