Vue的學習總結自測（三）—— vue生命周期、Vue 的父元件和子元件生命周期鈎子函數執行順序、生命周期内調用異步請求

目錄：

• 對Vue生命周期的了解
• Vue 的父元件和子元件生命周期鈎子函數執行順序
• 生命周期内調用異步請求

（1） 生命周期是什麼？

Vue 執行個體有一個完整的生命周期，也就是從開始建立、初始化資料、編譯模版、挂載 Dom -> 渲染、更新 -> 渲染、解除安裝等一系列過程，我們稱這是 Vue 的生命周期。

（2）各個生命周期的作用

用表格描述：

beforeCreate	元件執行個體被建立之初，元件的屬性生效之前
created	元件執行個體已經完全建立，屬性也綁定，但真實 dom 還沒有生成，$el 還不可用
beforeMount	在挂載開始之前被調用：相關的 render 函數首次被調用
mounted	el 被新建立的 vm.$el 替換，并挂載到執行個體上去之後調用該鈎子
beforeUpdate	元件資料更新之前調用，重新建構的虛拟 DOM與上次的虛拟dom ,通過diff算法進行對比
updated	元件更新之後，資料更改完成，dom也重新render完成
activited	keep-alive 專屬，元件被激活時調用
deadctivated	keep-alive 專屬，元件被銷毀時調用
beforeDestory	元件銷毀前調用，做一些善後工作，例如清楚計時器，清除非指令綁定的事件等等
destoryed	元件銷毀後調用

附上騰訊課堂視訊講解vue生命周期圖：

8、Vue 的父元件和子元件生命周期鈎子函數執行順序

Vue 的父元件和子元件生命周期鈎子函數執行順序可以歸類為以下 4 部分：

• 加載渲染過程

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

• 子元件更新過程

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

• 父元件更新過程

  父 beforeUpdate -> 父 updated

• 銷毀過程

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

9、在哪個生命周期内調用異步請求？

可以在鈎子函數 created、beforeMount、mounted 中進行調用，因為在這三個鈎子函數中，data 已經建立，可以将服務端端傳回的資料進行指派。

推薦在 created 鈎子函數中調用異步請求，因為在 created 鈎子函數中調用異步請求有以下優點：

• 能更快擷取到服務端資料，減少頁面 loading 時間；
• 階段可以通路data，使用watcher、events、methods，也就是說 資料觀測(data observer) 和event/watcher 事件配置 已完成。
• ssr 不支援 beforeMount 、mounted 鈎子函數，是以放在 created 中有助于一緻性；

參考連結：https://mp.weixin.qq.com/s/kB1Ncsbccd110LSW5qnxQA