探讨父组件和兄弟组件的生命周期

前言

当我们被问起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才开始挂载。在父兄子组件挂载前，各组件的实例已经初始化完成。其实这样渲染机制，才符合我们正常的逻辑。