快捷導(dǎo)航

vue3中的watchPostEffect在DOM 更新后的副作用處理方案

更新時間：2025年12月31日 11:57:14 作者：新節(jié)

文章介紹了Vue 3中watchPostEffect的使用方法和特性,watchPostEffect在響應(yīng)式數(shù)據(jù)變化后,DOM更新完成后執(zhí)行回調(diào),適用于需要在DOM更新后執(zhí)行副作用操作的場景,如DOM操作、第三方庫交互等,感興趣的朋友跟隨小編一起看看吧

1.watchPostEffect的基本用法

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="updateCount">修改 count</button> <br />
  </div>
</template>
<script setup lang="ts">
import { ref, watchPostEffect, watchEffect } from "vue";
const count = ref(0);
// 執(zhí)行比watchPostEffect要早，因為它是在 DOM 更新之前執(zhí)行的
watchEffect(() => {
  console.log(`watchEffect - ${count.value}`);
});
// 執(zhí)行比watchEffect要晚，因為它是在 DOM 更新之后執(zhí)行的
watchPostEffect(() => {
  console.log(`watchPostEffect - DOM 已更新，當(dāng)前 count 值為: ${count.value}`);
});
function updateCount() {
  count.value++; // 數(shù)據(jù)變化，視圖更新后，watchPostEffect 執(zhí)行
}
</script>

在這個例子中：

watchPostEffect 會在 count 改變之后，視圖更新完成后執(zhí)行回調(diào)，打印出最新的 count 值。執(zhí)行時機始終是比 watchEffect 要晚的。

如圖所示：

2.watchPostEffect與watchEffect的對比

特性	watchEffect	watchPostEffect
執(zhí)行時機	在響應(yīng)式數(shù)據(jù)變化后，立即執(zhí)行回調(diào)函數(shù)	在響應(yīng)式數(shù)據(jù)變化后，DOM 更新完成后執(zhí)行回調(diào)
適用場景	當(dāng)你希望在數(shù)據(jù)變化后立刻執(zhí)行副作用	當(dāng)你希望在 DOM 更新后執(zhí)行副作用，如操作 DOM 或調(diào)用第三方庫
常見用途	計算值、觸發(fā)數(shù)據(jù)相關(guān)的副作用	DOM 操作、與非 Vue 的庫交互、做布局等操作