Vue的this.$nextTick()

Vue的$next.Tick(callback);

官网描述：

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

翻译成通俗易懂的话就是：将要执行的函数在DOM更新后执行。

---

Demo:

目的：获取span标签中的文本信息

没有$nextTick的情况下：

<template>
    <div>
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
            <span ref="span">这是一段信息</span>
        </el-dialog>
        <el-button type="primary" @click="showDia">打开</el-button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            dialogVisible:false,
        }
    },
    methods:{
        showDia(){
            this.dialogVisible=true;
            console.log(this.$refs.span.innerHTML);
        }
    }
}
</script>

<style lang="less" scoped>

</style>

效果图：

第一次打开Dialog报错，而第二次打开则能获取span标签的信息；

现在使用$nextTick:

<template>
    <div>
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
            <span ref="span">这是一段信息</span>
        </el-dialog>
        <el-button type="primary" @click="showDia">打开</el-button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            dialogVisible:false,
        }
    },
    methods:{
        showDia(){
            this.dialogVisible=true;
            this.$nextTick(()=>{
                console.log(this.$refs.span.innerHTML);
            });
        }
    }
}
</script>

<style lang="less" scoped>

</style>

---

在created生命周期中也可以明显看到

created钩子函数

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。

<template>
    <div>
        <h1 ref="h1">123456</h1>
    </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    created(){
        console.log(this.$refs.h1.innerHTML);
    },
}
</script>

<style lang="less" scoped>

</style>

打开浏览器后出现报错：

使用$nextTick()的情况下：

<template>
    <div>
        <h1 ref="h1">123456</h1>
    </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    created(){
        this.$nextTick(()=>{
            console.log(this.$refs.h1.innerHTML);
        });
    }
}
</script>

<style lang="less" scoped>

</style>