【Vue】基礎系列(八)生命週期 - 初始化顯示 - 更新狀態 - 死亡狀態 - 父子元件

語言: CN / TW / HK

theme: vue-pro highlight: a11y-dark


嗨!~ 大家好,我是YK菌 🐷 ,一個微系前端 ✨,愛思考,愛總結,愛記錄,愛分享 🏹,歡迎關注我呀 😘 ~ [微訊號: yk2012yk2012,微信公眾號:ykyk2012]

「這是我參與11月更文挑戰的第21天,活動詳情檢視:2021最後一次更文挑戰

今天我們主要來學習Vue中生命週期,以及父子元件中的生命週期

1. vue物件的生命週期

生命週期:

  1. 又名:生命週期回撥函式、生命週期函式、生命週期鉤子。
  2. 是什麼:Vue在關鍵時刻幫我們呼叫的一些特殊名稱的函式。
  3. 生命週期函式的名字不可更改,但函式的具體內容是程式設計師根據需求編寫的。
  4. 生命週期函式中的this指向是vm 或 元件例項物件。

  1. 初始化顯示
  2. beforeCreate()
  3. created()
  4. beforeMount()
  5. mounted()
  6. 更新狀態
  7. beforeUpdate()
  8. updated()
  9. 銷燬 vue 例項: vm.$destory()
  10. beforeDestory()
  11. destoryed()

官方的圖示 在這裡插入圖片描述

2. 原理解釋圖

請新增圖片描述

3. 常用的生命週期方法

  • mounted(): 傳送ajax請求, 啟動定時器、繫結自定義事件、訂閱訊息等非同步任務【初始化操作】
  • beforeDestroy(): 做收尾工作, 如: 清除定時器、解綁自定義事件、取消訂閱訊息等【首尾工作】

4. 關於銷燬Vue例項

  1. 銷燬後藉助Vue開發者工具看不到任何資訊
  2. 銷燬後自定義事件會失效,但原生DOM事件依然有效
  3. 一般不會在beforeDestroy操作資料,因為即使操作資料,也不會再觸發更新流程了。

5. 示例

```html

YK菌學前端

``` 在這裡插入圖片描述

6. 父子元件的生命週期

  1. 載入渲染過程

javascript 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate->子created->子beforeMount->子mounted->父mounted

  1. 更新過程

javascript 父beforeUpdate->子beforeUpdate->子updated->父updated

  1. 銷燬過程

javascript 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

  1. 常見鉤子版本

javascript 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

最後,歡迎關注我的專欄,和YK菌做好朋友

「其他文章」