vue3中nextTick()應用實例詳解

更新時間：2023年12月07日 15:06:36 作者：江城開朗的豌豆

這篇文章主要給大家介紹了關于vue3中nextTick()應用的相關資料,nextTick()等待下一次DOM更新刷新的工具方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

在Vue3中，可以使用nextTick函數(shù)來延遲執(zhí)行某些操作，這些操作會在下一次DOM更新周期之后執(zhí)行。這個函數(shù)通常用于在數(shù)據更新后，等待DOM更新之后執(zhí)行一些操作，比如獲取DOM元素的尺寸、位置等。

nextTick()

例如，以下一個切換元素顯示的組件：

<template>
  <div>
    <button @click="handleClick">顯示/移除</button>
    <div v-if="show" ref="content">我是一個元素</div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(true)
const content = ref()
const handleClick = () => {
  show.value = !show.value
  console.log(show.value, content.value)//true null
}
</script>

打印結果：

如果show是true，那么content是null,這意味著 DOM 與組件的數(shù)據不同步。

我們加上nextTick()

<template>
  <div>
    <button @click="handleClick">顯示/移除</button>
    <div v-if="show" ref="content">我是一個元素</div>
  </div>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const show = ref(true)
const content = ref()
const handleClick = () => {
  show.value = !show.value
  nextTick(() => {
    console.log(show.value, content.value)
  })
}
</script>

打印結果：

當show為true時，獲取到dom。

nextTick() 與異步/等待

如果nextTick()不帶參數(shù)調用，則該函數(shù)返回一個promise，該promise在組件數(shù)據更改到達 DOM 時解析。

這有助于利用更具可讀性的async/await語法。如下例子：

<template>
  <div>
     <button @click="handleClick">顯示/移除</button>
    <div v-if="show" ref="content">我是一個元素</div>
  </div>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const show = ref(true)
const content = ref()
const handleClick = async () => {
  show.value = !show.value
   console.log(show.value, content.value)
  await nextTick()
  console.log(show.value, content.value)
}
</script>

執(zhí)行結果：