實作

VueX/Pinia

深入了解 Vue 生命週期

建立階段、更新階段、銷毀階段

建立階段

• 建立前 - beforeCreate : 完成初始化
• 建立後 - Created：元件建立完成(未掛載DOM)，data、computed、watch、methods 可取得，但 $el 、$ref 屬性還未被建立。
• 掛載前 - beforeMount：元件掛載之前，這時候有了el，將虛擬Dom轉入實體Dom。
• 掛載後 - mounted：元件掛載成功， $el 、template 被建立，完成Dom及渲染畫面，此時可以對畫面進行操作。

更新階段

• 更新前 - beforeUpdate : 變動資料後，在更新之前訪問元件
• 更新後 - updated : 資料更新完畢，顯示 View 到畫面並同步更新

這一段就是很單純查看你變更資料，同步變更至畫面。

銷毀階段

• 銷毀前 - beforeDestroy：銷毀前，此時元件還可使用。
• 銷毀後 - destroyed： 所有相關事件及綁定、偵聽都會解除，所有元件都被銷毀。

Dom 元素、Virtual DOM

表單處理