[VUE] 利用 key 做到 props 的特定資料更新就重新 mount

有一個需求是：每次 mount 和 props 的特定資料有更新時，都要執行 function doSomething()。

首先想到的是在子元件使用 onMounted() 同時也使用 watch() 監控 props 的特定資料。

但除了這個方法，還可以利用在父元件傳 :key ，就不用寫 watch() 了。

這邊示範兩種方式的做法。

在子元件使用 watch 監控

1. 用 watch 監控 props 來的資料，有監控到變化就執行 doSomething()。
2. 在 onMounted() 放入 doSomething()。

就可以做到 onMounted() 會執行，同時 props 來的特定資料有更新時也會執行。

ParentComponent:

<ChildComponent
  :id="dataId"
/>

ChildComponent:

const props = defineProps<{
  id: string
}>();

function doSomething() {}

watch(() => props.id, () => {
  doSomething();
});

onMounted(() => {
  doSomething();
});

在父元件使用 key 的做法範例

ParentComponent:

<ChildComponent
  :id="dataId"
  :key="dataId"
/>

ChildComponent:

const props = defineProps<{
  id: string
}>();

function doSomething() {}

onMounted(() => {
  doSomething();
});

1. 在父元件的 :key 放入每次有更新都要執行 doSomething() 的特定 props 資料。
2. onMounted() 一樣放入 doSomething() 。

這樣只要每次 dataId 有更新，都會因為 :key 偵測到改變而重新 mount 一個新的子元件 <ChildComponent>，因此就會執行到 onMounted() 裡面的 doSomething()。

就可以達到 onMounted() 會執行，同時 props 來的特定資料有更新時也會執行了！

這個方法適用於子元件「onMounted 要做的事」和「父元件 props 資料有更新時要做的事」完全相同的情境。

後續思考

這個做法的缺點，就是只看子元件的話看不出父層 props 的資料改變會呼叫 doSomething()，會以為只有 onMounted() 有呼叫到 doSomething() 。

不過這個例子可以讓我們了解能透過 :key 來重新 mount 子元件。