Vue.js中this.$nextTick()_this.$nexttion js-优快云博客

本文链接：https://blog.youkuaiyun.com/spriteson/article/details/106139013

本文深入探讨Vue.js框架中this.$nextTick()方法的应用场景，解释了如何利用它来确保DOM更新后的操作执行，避免因DOM尚未更新导致的问题。通过实例演示了this.$nextTick()与数据变化同步的技巧，帮助开发者更好地掌握Vue的响应式原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚开始学VUE搞不明白this. $n e x t T i c k () 什么时候用，现在总结下我的经验 t h i s .$ nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。

this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用它的实例上。

相当于JQ 中的setTimeout，就是延迟执行，

<template>
    <button ref="tar"  @click="testClick">{{test}}</button>
</template>
 
<script>
    export default {
        data () {
            return {
                test: '我是初始值'
            }
        }
　　　　 methods: {
　　　　　　 testClick(){
　　　　　　　　 this.test= '我是改变了的值'　　　　　
　　　　　　　　 console.log(that.$refs.tar.innerText) 
　　　　　　 }
　　　　 }
    }
</script>

这时候直接打印的话，由于dom元素还没更新，因此打印出来的还是未改变之前的值,所以打印出来的结果是：我是初始值

下面看加this.$nextTick这个方法作用是

methods：{
    testClick() {
        this.test= '我是改变了的值'
        this.$nextTick(() => {        
            console.log(that.$refs.tar.innerText) 
        })
    }
}