目录

this.$nextTick()

this.$nextTick()

this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。

简单的理解，vue.js中this.$nextTick()就是起到了一个等待数据的作用，也就是说，将一些回调延迟，等到DOM更新之后再开始执行。

例如：
1.你改变了dom元素数据，然后你又想输出dom，那你只能等到dom更新完成之后才会实现.
2.通过事件改变data数据，然后输出dom，在方法里直接打印的话， 由于dom元素还没有更新， 因此打印出来的还是未改变之前的值，而通过this.$nextTick()获取到的值为dom更新之后的值.

<template>
     <section>
         <div ref="hello">
            <h1 ref="hello">{{ value }}</h1>
         </div>
         <button type="warn" @click="get">点击</button>
     </section>
</template>
 
<script>
export default {
    data() {
        return {
             value:'beautiful girl'
        };
    },
    mounted() {
        console.log("mounted首次执行")
        console.log("mounted11",this.$refs["hello"])
        this.$nextTick(function(){
        console.log("mounted 中执行netxtTick函数")
        console.log("mounted22",this.$refs["hello"])
        })
    },
    
    created() {
        console.log("created首次执行")
        console.log("created11",this.$refs["hello"])
        this.$nextTick(function(){
        console.log("created 中执行netxtTick函数")
        console.log("created22",this.$refs["hello"])
        })
    },

    methods: {
        get(){
            this.value="漂亮女孩!"
            console.log("methods11",this.$refs["hello"].innerText)
            this.$nextTick(function(){
                console.log("methods22",this.$refs["hello"].innerText)
            })
            }
    }
};
</script>

<style   scoped>
 
</style>

最后

以上就是失眠发箍为你收集整理的常用的vue、js方法this.$nextTick()的全部内容，希望文章能够帮你解决常用的vue、js方法this.$nextTick()所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。