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

OneLine發表於2019-04-20
元件

前言

當我們被問起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才開始掛載。在父兄子元件掛載前，各元件的例項已經初始化完成。其實這樣渲染機制，才符合我們正常的邏輯。

相關文章