今天又跟大神學習 重新認識 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 |
元件卸載完畢，資料與愛情都不復存在 | 元件卸載完畢，資料與愛情都不復存在 |
心得是
vue元件 aka vue實體 有時是 模板DOM 有時是 畫面，真滴是主角太多元件 卸載前與卸載時，資料跟畫面消失的一樣快。想想也是合理，先有資料才好安排畫面是要呈現蛇魔細節囉希望我沒有理解錯，以上理解有所出入，求求俠客都在麻煩協助提點，感謝！！(っಠ‿ಠ)っ
iThome鐵人賽
看影片追技術