快捷導(dǎo)航

vue3中nextTick()應(yīng)用實(shí)例詳解

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

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

前言

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

nextTick()

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

<template>
  <div>
    <button @click="handleClick">顯示/移除</button>
    <div v-if="show" ref="content">我是一個(gè)元素</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>

打印結(jié)果：

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

我們加上nextTick()

<template>
  <div>
    <button @click="handleClick">顯示/移除</button>
    <div v-if="show" ref="content">我是一個(gè)元素</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>

打印結(jié)果：

當(dāng)show為true時(shí)，獲取到dom。

nextTick() 與異步/等待

如果nextTick()不帶參數(shù)調(diào)用，則該函數(shù)返回一個(gè)promise，該promise在組件數(shù)據(jù)更改到達(dá) DOM 時(shí)解析。

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

<template>
  <div>
     <button @click="handleClick">顯示/移除</button>
    <div v-if="show" ref="content">我是一個(gè)元素</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í)行結(jié)果：