vue nextTick()讲解

最新推荐文章于 2024-03-16 19:06:02 发布

橘子柿子Coox

最新推荐文章于 2024-03-16 19:06:02 发布

阅读量111

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/Ttowx/article/details/129933013

版权

Vue的nextTick方法用于在DOM更新之后执行回调，确保能访问到最新的响应式数据。当状态改变如count++时，DOM更新是异步的，nextTick或await其返回的Promise可以等待这一过程完成。在组件内使用this.$nextTick会自动绑定回调的上下文。示例展示了如何在DOM更新后获取新值或执行依赖于新状态的操作。

摘要由CSDN通过智能技术生成

1.方法nextTick()，为vue中等待下一次DOM更新刷新的工具方法

function nextTick(callback?: () => void): Promise<void>

2.官方解释：当你在vue中改变响应式数据的状态时，如count++，最终的dom更新不是同步生效的，因为在vue中，这些改变操作会缓存在一个队列中，知道下一个’tick‘才一起执行，这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新
nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。

3.this.$nextTick()

和全局版本的 nextTick() 的唯一区别就是组件传递给 this.$nextTick() 的回调函数会带上 this 上下文，其绑定了当前组件实例

interface ComponentPublicInstance {
  $nextTick(callback?: (this: ComponentPublicInstance) => void): Promise<void>
}

4.实例
①官方实例

<script>
import { nextTick } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    async increment() {
      this.count++

      // DOM 还未更新
      console.log(document.getElementById('counter').textContent) // 0

      await nextTick()
      // DOM 此时已经更新
      console.log(document.getElementById('counter').textContent) // 1
    }
  }
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

②
在nextTick中，可直接访问到你响应式数据发生更改后的值

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p id="btn" @click="handle">{{ count }}</p>
  </div>
</template>
<script setup lang="ts">
import { nextTick, ref } from 'vue';

let count=ref(0);
// let count=0;
const handle= async function(){
  count.value++;
  console.log(document.getElementById('btn')?.innerHTML);//1
  await nextTick(()=>{
    console.log(document.getElementById('btn')?.innerHTML);//2
   })
   console.log(document.getElementById('btn')?.innerHTML);//2
}


</script>