Vue--nextTick--作用/用法/原理

最新推荐文章于 2024-09-14 09:25:39 发布

原创最新推荐文章于 2024-09-14 09:25:39 发布 · 639 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #1024程序员节

Vue 专栏收录该内容

86 篇文章

订阅专栏

Vue的nextTick用于在DOM更新后执行回调，确保能获取到最新的DOM状态。它会在同一个事件循环的末尾执行，遵循浏览器的异步更新策略。例如，在修改数据后立即读取DOM会获取到旧值，而通过nextTick则能在DOM更新后获取新值。在组件的created生命周期钩子中，由于DOM未创建，直接访问$refs会为空，但使用nextTick则能在DOM创建后访问。Vue的异步更新队列确保了多次数据修改仅触发一次DOM更新，提高了效率。

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

原文网址：Vue--nextTick--作用/用法/原理_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍Vue的nextTick的作用、用法、原理。

官网网址

https://v2.cn.vuejs.org/v2/api/#Vue-nextTick

作用

Vue 在修改数据后，视图（DOM）不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。所以，在修改数据之后立马读取DOM是获取不到新数据的，获取到的是原来的DOM数据。

使用nextTick可以获得DOM更新后的数据。在下次 DOM 更新之后Vue会回调nextTick指定的函数。可以在修改数据之后立即使用这个nextTick方法，在指定的函数里获取更新后的 DOM。

实例

1：修改数据后读取DOM

说明

修改数据后立马读DOM是读不到的（读到的是旧数据），用nextTick才能读到。

代码

<template>
  <div class="outer">
    <div>
      这是CompA
    </div>
    <h3 ref="hello">{{ value1 }}</h3>
    <button @click="testClick()">测试一下</button>
  </div>
</template>

<script>

export default {
  name: 'CompA',
  data () {
    return {
      value1: 'aa'
    }
  },
  methods: {
    testClick () {
      this.value1 = 'bb'
      console.log('直接获取：' + this.$refs.hello.innerText)
      this.$nextTick(() => {
        console.log('nextTick获取：' + this.$refs.hello.innerText)
      })
    }
  }
}
</script>

<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

测试

可以发现，直接读取值读到的是旧值，用nextTick获取到的是新值。

2：created获取DOM

说明

我们知道，created被回调时，DOM还没有创建，读不到DOM，可以使用nextTick。

代码

<template>
  <div class="outer">
    <div>
      这是CompA
    </div>
    <h3 ref="hello">{{ value1 }}</h3>
  </div>
</template>

<script>

export default {
  name: 'CompA',
  data () {
    return {
      value1: 'aa'
    }
  },

  created () {
    console.log('created进入：' + this.$refs.hello)
    this.$nextTick(() => {
      console.log('created的nextTick：' + this.$refs.hello)
    })
  },
  mounted () {
    console.log('mounted进入：' + this.$refs.hello)
    this.$nextTick(() => {
      console.log('mounted的nextTick：' + this.$refs.hello)
    })
  }
}
</script>

<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

结果