Day 9: Vue監聽器的執行時機點

2024 iThome 鐵人賽

DAY 9

JavaScript

Vue.js學習中的細節陷阱：30天自我學習指南系列第 9 篇

16th鐵人賽 vue.js vue3

Rafael

2024-09-22 11:29:57

127 瀏覽

分享至

昨天我們接觸到watch、watchEffect，今天繼續來挖掘對Vue還不熟之前我的一些疑問，深入探討研究Vue監聽器，即便實務上已經使用的很熟悉，跟chatGPT答辯後才發現原來不只是官網，我也忽略掉滿多細節，造成用的時候觀念模稜兩可呢~

相信很多文章或官網已經介紹滿清楚watch監聽器功能，主要是監聽某些響應式數據做一些副作用(side effect)處理，像是呼叫api、更動其他響應式數據源，不過我比較好奇的是，到底watch執行的時間點是在什麼時候。

今日學習重點:

Vue watch執行函式的副作用行為是在瀏覽器更新之前還之後呢?
watch 選項參數除了deep、immediate外，鮮少使用的flush選項又代表什麼?
短時間觸發watch監聽器的批次更新(batch update)

保持元件的純粹，讓元件渲染忠實呈現在畫面上

是來自以前學React官方有提及介紹的關於純粹元件（pure components）的描述觀念:

給定相同的 prop 或內部響應式資料來源，元件應該始終生成相同的 DOM 結構或模板渲染結果-Same inputs, same output。
應該避免依賴於外部的可變狀態或副作用來影響元件初次在畫面上的渲染

例如組件的渲染前執行很多API獲取資料、進行原生瀏覽器DOM API的操作，因為必須依賴於這些外部的帶進來的非響應式資料變量，這可能會導致不同步的渲染結果，就會違反這一原則。

像是API呼叫獲取資料等副作用，React的設計思維: 渲染完畫面將資料先放到瀏覽器呈現後再執行side effect，確保不阻塞影響畫面渲染。

以下張圖來說(圖片出處)，我們在元件裡定義好的初始資料，應該忠實地反應在右邊輸出:

如果以Vue來假設行為也是類似的話:

一個SFC組件文件要放到網頁上渲染時，裡面的初始化或更新的邏輯，應該保持像是純函式(pure function)般行為，每次丟進去的資料源，產製出來的UI都是穩定一樣。

watch 監聽器回調函式執行時機點 vs 瀏覽器渲染

那我們來深入watch監聽器執行副作用時，時機點是不是也是如同pure component設計思維般純粹?

回顧一下watch基本用法:

watch會監聽一個響應式數據來源(ref 或reactive)，當監聽數據有變化時，會執行回調函式(callback function)，同時也提供接收兩個新舊值參數(newValue、oldValue)供你作一些額外驗證使用。

const obj = reactive({ count: 0 })

watch(obj, (newValue, oldValue) => {
  // callback回調函式，當前面監聽數據有變化才執行
})

obj.count+

那麼watch回調函式(處理副作用)執行時機點預設運作時機又是如何，會如同React一樣保持到瀏覽器渲染完畢嗎?

瀏覽器更新前執行回調函式(預設pre模式)✅
等到最後瀏覽器更新DOM完畢後才執行回調函式(post模式)❌

我們可以另外寫一個案例來理解watch的行為

我們使用ref的捕捉樣板DOM元素的功能，watch 回調函式(callback function)內容去捕捉樣板DOM元素內容。

你會發現一直抓到舊的DOM元素內容，console.log()顯示內容總是還沒更新前的DOM元素內容，看起來執行回調函式副作用的行為，會在瀏覽器渲染完成前執行完畢。

<template>
  <button @click='count++' ref='target'>按我 +1 -{{ count }} </button>
</template>
<script setup>
import {ref, watch} from 'vue'
const count = ref(0)
const target = ref(null)
watch(count,(val)=>{
  console.log("watch執行時機點", val, 'DOM元素內容', target.value.innerText)
})
</script>

watch監聽器回調函式執行時機點設定參數flush，預設為pre

在Vue watch 函式中允許你監視一個或多個響應式數據的變化，並在數據變更時執行特定的邏輯。比較特殊的是 Vue 3中的 watch 有一個名為 flush的選項，這個選項可以控制監視回調的觸發時機，在瀏覽器渲染的前後:

flush: pre（預設值）

回調函數在 Vue 進行瀏覽器 DOM 更新之前觸發，是watch的預設模式。

意味著在回調執行的時候，DOM 還沒有根據變更進行更新，所以上面案例按下按鈕捕捉到都是還沒更新的舊DOM元素囉~。

這個模式適合需要在 DOM 更新前執行邏輯的情況，例如在數據變更時執行一些同步處理或檢查。

flush: post

回調函數在 Vue 進行Virtual DOM 更新之後觸發(註:但在瀏覽器渲染重繪之前執行)

需要等待 DOM 更新後再執行的操作，尤其是在依賴最新的 DOM 結構進行操作的情況下，像是必須調用瀏覽器API的滾軸行為（例如計算 DOM 元素的大小或位置，滾到最新的對應位置）。

flush: sync

回調函數會在數據變更的那一刻立即同步觸發。這與其他兩個模式不同，它不會等待 Vue 的下一個異步 DOM 更新循環。

這適合需要立即響應數據變化的情況，因為會高頻率觸發回調，應該謹慎使用，因為它可能會影響性能或造成一些預料外的副作用。

watch 的批次更新(batch update)

flush: pre和flush: sync 看起字面上意思很像，但flush: pre 模式多了個批次更新(batch update)處理，來看一段在Vue社群討論區有人討論的案例:

也有完整案例程式碼，可以玩玩看~

案例解釋:

分別設計了監聽a和b響應式變數的watch監聽器，分別有3種flush: pre、 flush: sync 和flush: sync 模式，我們在組件掛載到瀏覽器上後，調用其中的生命週期函式 onMounted 執行兩次a變數的資料更新。

flush: pre 最終只會執行一次回調函式，並且把兩次++操作對響應式資料先集中起來，再一併更新到畫面上，這就是所謂的批次更新(batch update)，而flush: sync 會執行兩次。

<script setup>
import { ref, watch, reactive, onMounted } from 'vue';
  
const output = reactive({
  pre: "",
  sync: "",
  post: "",
});

const a = ref(0);
const b = ref(0);

watch([ a, b ], () => {
  output.pre += `pre, a: ${a.value}, b: ${b.value}\n`;
  console.log("pre callback");
}, { flush: "pre" });

watch([ a, b ], () => {
  output.sync += `sync, a: ${a.value}, b: ${b.value}\n`;
}, { flush: "sync" });

watch([ a, b ], () => {
  output.post += `post, a: ${a.value}, b: ${b.value}\n`;
}, { flush: "post" });

console.log("before mutations");
onMounted(() => {
 a.value++;
 a.value++;
 b.value++;
  console.log("after mutations");
})

</script>

<template>
  <pre>{{ output.pre + "\n" }}{{ output.sync + "\n" }}{{ output.post + "\n" }}</pre>
</template>