[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-vuevue3重新渲染元件的方式-vue3-rerender-a-component":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":19,"minRead":20},165,"vuevue3重新渲染元件的方式-vue3-rerender-a-component","[Vue]Vue3重新渲染元件的方式-Vue3 rerender a component","Vue3重新渲染元件的方式-Vue3 rerender a component 研究了一下vue3中如果要重新 […]","\u003Ch1>Vue3重新渲染元件的方式-Vue3 rerender a component\u003C\u002Fh1>\n\u003Cp>研究了一下vue3中如果要重新讀取元件(component)的作法，有時候真的無法靠資料更新之類的達到目的時，就必須重新讀取\u002F渲染元件。一開始要實作這件事時還真的沒什麼頭緒，直覺想到用v-if來實作，大概長這樣。\u003C\u002Fp>\n\u003Ch3>v-if法\u003C\u002Fh3>\n\u003Cp>簡單來說就是用renderComponent變數來控制component的起動\u003C\u002Fp>\n\u003Cpre>\u003Ccode><template>\n    <my-component v-if="renderComponent" \u002F>\n<\u002Ftemplate>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>在setup中設定，nextTick是當畫面渲染完後再執行\u003C\u002Fp>\n\u003Cpre>\u003Ccode>import { nextTick, ref } from 'vue';\nconst renderComponent = ref(true);\n\nconst forceRerender = async () => {\n  \u002F\u002F 移除component的DOM\n  renderComponent.value = false;\n\n    \u002F\u002F 等待主畫面\n    await nextTick();\n\n    \u002F\u002F 重新加入這個component\n  renderComponent.value = true;\n};\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>再找個地方執行forceRerender就可以，基本原理就是將component移除、重新創建、掛載。\u003Cbr \u002F>\n但查了一下資料後，發現有更漂亮的作法。\u003C\u002Fp>\n\u003Ch3>鍵值改變驅動Key-Changing\u003C\u002Fh3>\n\u003Cp>我們只要新增一個屬性在component上，透過屬性值的改變就能觸發vue更新component。\u003C\u002Fp>\n\u003Cpre>\u003Ccode><template>\n    <my-component :key="componentKey" \u002F>\n<\u002Ftemplate>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>透過forceRerender來更改componentKey的值\u003C\u002Fp>\n\u003Cpre>\u003Ccode>import { ref } from 'vue';\nconst componentKey = ref(0);\n\nconst forceRerender = () => {\n  componentKey.value += 1;\n};\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>接下來只要觸發forceRerender，就能更新component。\u003Cbr \u002F>\n但老實說我其實還不太確定為什麼這個做法較為優秀，歡迎留言討論XD\u003C\u002Fp>\n\u003Cp>很推薦參考這篇\u003Ca href=\"https:\u002F\u002Fmichaelnthiessen.com\u002Fforce-re-render\u002F\">參考資料\u003C\u002Fa>\u003C\u002Fp>\n","2022-12-10T10:00:13","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F11%2F256px-Vue.js_Logo_2.svg_.png",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,17],{"name":16,"slug":16},"frontend",{"name":18,"slug":18},"vue","\u002Fblog\u002Fvuevue3重新渲染元件的方式-vue3-rerender-a-component",1]