nextTick介绍

1、背景

• Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

2、作用

• $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

3、例子

    //html
    <div class="app">
        <div ref="msgDiv">{{msg}}</div>
        <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
        <div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
        <div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
        <button @click="changeMsg">
            Change the Message
        </button>
    </div>
    //vue-js
    export default {
    name: "test",
    data() {
        return {
        msg: "Hello Vue.",
        msg1: "",
        msg2: "",
        msg3: ""
        };
    },
    methods: {
        changeMsg() {
        this.msg = "Hello world.";
        this.msg1 = this.$refs.msgDiv.innerHTML;
        console.log("msg1="+this.msg1)
        this.$nextTick(() => {
            this.msg2 = this.$refs.msgDiv.innerHTML;
            console.log("msg2="+this.msg2)
        });
        this.msg3 = this.$refs.msgDiv.innerHTML;
        console.log("msg3="+this.msg3)
        }
    }
    };
    //打印结果
    msg1=Hello Vue.  //数据进行变化之后没有立即执行DOM操作
    msg3=Hello Vue.  //因为msg2在延迟函数里，所以先打印msg3
    msg2=Hello world.  //changeMsg()执行完毕之后调用$nextTick函数，此时DOM已经更新

4、应用场景：

• 在vue生命周期的created()钩子函数进行的DOM操作一定要放在vue.nextTick()的回调函数中

5、原因：

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

感谢博主启发 https://www.jianshu.com/p/a7550c0e164f