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

前言

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