探討父組件和兄弟組件的生命週期

前言

當咱們被問起vue的生命週期的時候，咱們天然就回答到有beforeCreate,created,mounted,updated,destroy。就是一個生命的開始和結束。此次咱們探討的是咱們有兄弟組件的時候，各個組件在執行鉤子函數的時候的執行順序是怎麼樣的，按照以前的理解：是先執行完兄弟組件A的生命週期再執行兄弟組件B的生命週期。若是是這樣的話，那麼vue的執行效率是不高的。

什麼是父組件

以前本身自己一直有個誤區，在進行父子組件進行傳值的時候，咱們常常會說，在父組件綁定一個值，子組件用prop接收。

<template>
    <div>
        <custom-child :value='value'></custom-child>
    </div>
</template>
複製代碼

一直覺得<custom-child></custom-child>這個就是父組件，由於官網也常說父組件綁定值，其實真正的父組件是 這個

<!--我纔是父組件-->
<div>
    <custom-child></custom-child> 
<div>
複製代碼

<!-- 我纔是子組件-->
<custom-child></custom-child>
複製代碼

ps：不知道有沒有人以前和我想的同樣

什麼是生命週期

你把一個組件想象爲一個生命，有一個由生 (create) 到死 (destroy)的過程。這個過程能夠分紅不少階段，好比構造階段、更新階段、析構/銷燬階段，不一樣階段依據特定的順序和條件依次經歷。這就是組件的生命週期 (Life cycle)。

若是把不一樣階段實現爲一個個函數的話，一個組件看起來就是這個樣子：

function component(){
    create()
    update()
    destroy()
}
複製代碼

什麼是鉤子函數

你在定義這個「生命」的階段以外，還能夠預留多個時機，好根據不一樣的場合執行不一樣的邏輯，就像這樣：

function component() {
  if (beforeCreate !== undefined) beforeCreate()
  create()
  if (afterCreate !== undefined) afterCreate()
  if (beforeUpdate !== undefined) beforeUpdate()
  update()
  if (afterUpdate !== undefined) afterUpdate()
  if (beforeDestroy !== undefined) beforeDestroy()
  destroy()
  if (afterDestroy !== undefined) afterDestroy()
}
複製代碼

這些 beforeXxx、afterXxx 就是鉤子(Hooks)，它們鏈接了組件生命週期的不一樣階段，給你在組件默認行爲之上執行自定義邏輯的機會。

父組件

<template>
	<div class="father">
		<component-A class="son_A"></component-A>
		<component-B class="son_B"></component-B>
	</div>
</template>
export default{
    beforeCreate() {
		console.group("%c%s", "color:black", "beforeCreate 建立前狀態-->>>>父組件");
	},
	created() {
		console.group("%c%s", "color:black", "created 建立完畢狀態-->>>>父組件");
	},
	beforeMount() {
		console.group("%c%s", "color:black", "beforeMount 掛載前狀態-->>>>父組件");
	},
	mounted() {
		console.group("%c%s", "color:black", "mounted 掛載完畢狀態-->>>>父組件");
	},
	beforeUpdate() {
		console.group("%c%s", "color:black", "beforeUpdate 更新前狀態-->>>>父組件");
	},
	updated() {
		console.group("%c%s", "color:black", "updated 更新後狀態-->>>>父組件");
	},
	beforeDestroy() {
		console.group(	"%c%s",	"color:black","beforeDestroy 組件銷燬前狀態-->>>>父組件");
	},
	destroyed() {
		console.group("%c%s","color:black","destroyed 組件銷燬後狀態-->>>>父組件");
	}
}
複製代碼

子組件

子組件也依次按照這順序寫出來，就不依依展現了。

父兄子組件各個生命週期執行的順序

從圖中咱們發現，各個組件生命週期不是按照從上到下依次執行，執行完一個生命週期再執行另外一個生命週期，父組件在執行到beforeMount就開始初始化兄弟組件A，兄弟組件A一樣執行到beforeMount就初始化兄弟組件B,當兄弟組件B執行beforeMount完的時候，兄弟組件A纔開始掛載。在父兄子組件掛載前，各組件的實例已經初始化完成。其實這樣渲染機制，才符合咱們正常的邏輯。