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

栏目: 编程语言 · 发布时间: 5年前

内容简介:当我们被问起vue的生命周期的时候,我们自然就回答到有beforeCreate,created,mounted,updated,destroy。就是一个生命的开始和结束。这次我们探讨的是我们有兄弟组件的时候,各个组件在执行钩子函数的时候的执行顺序是怎么样的,按照之前的理解:是先执行完兄弟组件A的生命周期再执行兄弟组件B的生命周期。如果是这样的话,那么vue的执行效率是不高的。之前自己本身一直有个误区,在进行父子组件进行传值的时候,我们经常会说,在父组件绑定一个值,子组件用prop接收。一直以为

当我们被问起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 组件销毁后状态-->>>>父组件");
	}
}
复制代码

子组件

子组件也依次按照这顺序写出来,就不依依展示了。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JSP & Servlet学习笔记

JSP & Servlet学习笔记

【台湾】林信良 / 清华大学出版社 / 2012-5 / 58.00元

本书是作者多年来教学实践经验的总结,汇集了教学过程中学生在学习JSP & Servlet时遇到的概念、操作、应用或认证考试等问题及解决方案。 本书针对Servlet 3.0的新功能全面改版,无论是章节架构与范例程序代码,都做了全面更新。书中详细介绍了Servlet/ JSP与Web容器之间的关系,必要时从Tomcat源代码分析,了解Servlet/ JSP如何与容器互动。本书还涵盖了文本处理......一起来看看 《JSP & Servlet学习笔记》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换