Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
在解決問題之道上不斷前行
研究了一下vue3中如果要重新讀取元件(component)的作法,有時候真的無法靠資料更新之類的達到目的時,就必須重新讀取/渲染元件。一開始要實作這件事時還真的沒什麼頭緒,直覺想到用v-if來實作,大概長這樣。
簡單來說就是用renderComponent變數來控制component的起動
<template>
<my-component v-if="renderComponent" />
</template>
在setup中設定,nextTick是當畫面渲染完後再執行
import { nextTick, ref } from 'vue';
const renderComponent = ref(true);
const forceRerender = async () => {
// 移除component的DOM
renderComponent.value = false;
// 等待主畫面
await nextTick();
// 重新加入這個component
renderComponent.value = true;
};
再找個地方執行forceRerender就可以,基本原理就是將component移除、重新創建、掛載。
但查了一下資料後,發現有更漂亮的作法。
我們只要新增一個屬性在component上,透過屬性值的改變就能觸發vue更新component。
<template>
<my-component :key="componentKey" />
</template>
透過forceRerender來更改componentKey的值
import { ref } from 'vue';
const componentKey = ref(0);
const forceRerender = () => {
componentKey.value += 1;
};
接下來只要觸發forceRerender,就能更新component。
但老實說我其實還不太確定為什麼這個做法較為優秀,歡迎留言討論XD
很推薦參考這篇參考資料