iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Modern Web

Vue 3 請你幫我做一個網站好嗎 (っಠ‿ಠ)っ系列 第 16

Day16 - 複習 Vue 生命週期

今天又跟大神學習 重新認識 Vue.js | Kuro Hsu 1-7 元件的生命週期與更新機制,(可能是之前學 Vue2 不夠認真 XD)這次看大神的觀察生命週期小 console ,才讓我第一次覺得生命週期好像沒那麼難懂 A3A

Vue 生命週期 翻譯翻譯 資料狀態 畫面狀態
beforeCreate before 元件 被 create 元件還沒被製造,當然就沒有資料可言 元件還沒被製造,當然就沒有畫面可言
created 元件 被 create 元件剛被製造了!有資料啦!data, props,computed 你好呀! 元件剛被製造,但又還沒有跟模板的 html dom 綁定,所以一樣沒有畫面
beforeMount before 模板DOM 被 mount 資料從上一步就妥妥了 阿就還沒有跟模板的 html dom 綁定,所以一樣沒有畫面
mounted 模板DOM 被 mount 資料從上上一步就妥妥了 元件跟模板的 html dom 綁定啦!有畫面哩!$el 哩賀~
beforeUpdate before 畫面 被 update 資料先更新先爽 畫面還沒更新但也沒有不爽,大家都開心讚
updated 畫面 被 update 資料從上一步就妥妥了 畫面更新一樣爽
beforeUnmount before 元件 被 unmount 元件卸載前,如同情人分手前一樣,失和的已經掌握不到對方的想法了 元件卸載前,如同情人分手前一樣,失和的已經掌握不到對方的身影與行蹤了
unmount 元件 被 unmount 元件卸載完畢,資料與愛情都不復存在 元件卸載完畢,資料與愛情都不復存在

心得是

  1. Vue 生命週期的主詞每次不一定是同個人,有時是 vue元件 aka vue實體 有時是 模板DOM 有時是 畫面,真滴是主角太多
  2. 資料大多都比畫面快,比畫面快出現、快更新;就只有在 元件 卸載前與卸載時,資料跟畫面消失的一樣快。想想也是合理,先有資料才好安排畫面是要呈現蛇魔細節囉

希望我沒有理解錯,以上理解有所出入,求求俠客都在麻煩協助提點,感謝!!(っಠ‿ಠ)っ


上一篇
Day15 - 產品編輯 modal 還醜但功能 OK 了
下一篇
Day17 - 上架後臺的商品列表頁,今天只鋪了 template
系列文
Vue 3 請你幫我做一個網站好嗎 (っಠ‿ಠ)っ19

尚未有邦友留言

立即登入留言