Vue.$nextTick()的使用

• Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。Vue.$nextTick(callback)，当dom发生变化更新后执行的回调。

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

• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。因为在created()钩子函数执行的时候DOM其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。

• 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

<template>
    <div class="nextTick">
        <div ref="msgDiv">{{msg}}</div>
        <button @click="changeMsg">
            Change the Message
        </button>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    name: "nextTick",
    data() {
        return {
            msg: "Hello Vue."
        };
    },
    methods: {
        changeMsg() {
            this.msg = "Hello World.";
            setTimeout(() => {
                console.log(this.$refs.msgDiv.innerHTML); // Hello World.
            }, 0);
            this.$nextTick(() => {
                console.log(this.$refs.msgDiv.innerHTML); // Hello World.
            });
            console.log(this.$refs.msgDiv.innerHTML); // Hello Vue.(没有改变)
        }
    }
};
</script>

点击按钮之后，发现控制台中this.$nextTick()和setTimeout()都发生了改变

可以发现this.$nextTick和setTimeout的效果是一样的，都是将回调方法放入异步队列中

this.$nextTick是当dom发生变化更新后执行的回调。setTimeout只是一个异步延迟执行