内容简介:当我们被问起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 组件销毁后状态-->>>>父组件"); } } 复制代码
子组件
子组件也依次按照这顺序写出来,就不依依展示了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- React 组件生命周期详解
- 【Tomcat学习笔记】组件声明周期
- 【Tomcat学习笔记】组件声明周期
- 组件生命周期管理和通信方案
- Vue 组件生命周期钩子函数
- 生命周期组件 Lifecycle 源码解析(一)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JSP & Servlet学习笔记
【台湾】林信良 / 清华大学出版社 / 2012-5 / 58.00元
本书是作者多年来教学实践经验的总结,汇集了教学过程中学生在学习JSP & Servlet时遇到的概念、操作、应用或认证考试等问题及解决方案。 本书针对Servlet 3.0的新功能全面改版,无论是章节架构与范例程序代码,都做了全面更新。书中详细介绍了Servlet/ JSP与Web容器之间的关系,必要时从Tomcat源代码分析,了解Servlet/ JSP如何与容器互动。本书还涵盖了文本处理......一起来看看 《JSP & Servlet学习笔记》 这本书的介绍吧!