$nextTick()（详细说明）

最新推荐文章于 2025-02-24 08:45:00 发布

爱在冰川了

最新推荐文章于 2025-02-24 08:45:00 发布

阅读量262

点赞数

分类专栏：笔记文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/T8682828/article/details/126999753

版权

笔记专栏收录该内容

33 篇文章

订阅专栏

本文通过一个具体的Vue示例介绍了Vue中$nextTick方法的作用与使用场景。当数据变化后DOM不会立即更新，这时可以使用$nextTick确保在DOM更新后再执行某些依赖于DOM的操作。

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

因为 Vue 并不是数据发生变化之后 DOM 立即变化，而是有一定延迟，因此会出现你拿到的值会出现延迟更新的，于是就出现了 $nextTick() 方法

举个例子：

<template>
  <div class="hello">
    <div>
      <button  @click="testClick()" ref="btn">{{testMsg}}</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods: {
    testClick:function(){
      this.testMsg="修改后的值";
      console.log(this.$refs.btn.innerText);   //that.$refs.btn获取指定DOM，输出：原始值
    }

  }
}
</script>

解决办法：

<template>
  <div class="hello">
    <div>
      <button  @click="testClick()" ref="btn">{{testMsg}}</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods: {
     testClick: function () {
       this.testMsg = "修改后的值";
       this.$nextTick(function () {
         console.log(this.$refs.btn.innerText);  //输出：修改后的值
       });
     }
  }
}
</script>