vue.js中this.$nextTick()的使用

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

  假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中；

具体案例如下

<template>
    <div ref="reference">{{msg}}</div>
    <el-button type="primary" @click="get">确认</el-button>
</template>

export default {
    data() {
        return {
            msg: 'Hello!'
        }
    },
    methods: {
        get(){
            this.msg = '哈哈' // 值改变了
            console.log(this.$refs.reference.innerText); // Hello! dom未更新
            this.$nextTick(() => { // 等待dom更新
                console.log(this.$refs.reference.innerText); // 哈哈 dom更新
            });
        }
    },
}