Vue父组件和子组件生命周期的执行顺序

父子组件生命周期概览

在Vue中,组件的生命周期可以分为几个主要阶段:创建(creation)、挂载(mounting)、更新(updating)和销毁(destruction)。每个阶段都有相应的钩子函数,允许我们在特定时刻介入组件的行为。

初始化阶段

当我们将一个Vue组件嵌入到父组件中时,它们的生命周期钩子将按照以下顺序执行:

  1. 父组件beforeCreate:在父组件实例被创建之后、初始化之前执行。
  2. 父组件created:在父组件实例创建完成后执行,此时数据观测、属性和方法的运算、watch/event事件回调已经设置好了。
  3. 父组件beforeMount:在父组件模板编译/挂载之前执行。
  4. 子组件beforeCreate:同父组件beforeCreate,但是针对子组件。
  5. 子组件created:同父组件created,但是针对子组件。
  6. 子组件beforeMount:同父组件beforeMount,但是针对子组件。
  7. 子组件mounted:子组件挂载完成,DOM元素已经插入。
  8. 父组件mounted:父组件挂载完成,此时父组件的模板中的子组件也已经挂载完成。

这个初始化过程确保了父组件能够在子组件准备就绪之前,完成自己的设置和渲染准备工作。

更新阶段

当组件的数据发生变化,需要重新渲染时,更新的生命周期钩子将按以下顺序执行:

  1. 父组件beforeUpdate:在父组件的数据变化之后、DOM重新渲染和打补丁之前执行。
  2. 子组件beforeUpdate:在子组件的数据变化之后、DOM重新渲染和打补丁之前执行。
  3. 子组件updated:在子组件的DOM重新渲染和打补丁之后执行。
  4. 父组件updated:在父组件的DOM重新渲染和打补丁之后执行。

这个顺序确保了子组件能够在父组件重新渲染之前,先更新自己的状态和视图。

销毁阶段

当我们不再需要一个组件时,Vue提供了销毁的生命周期钩子,它们的执行顺序如下:

  1. 父组件beforeDestroy:在父组件销毁之前执行,此时组件实例仍然完全可用。
  2. 子组件beforeDestroy:在子组件销毁之前执行,此时组件实例仍然完全可用。
  3. 子组件destroyed:在子组件销毁之后执行,此时组件的指令已经解绑,事件监听器已被移除,子组件实例不再可用。
  4. 父组件destroyed:在父组件销毁之后执行,此时组件的指令已经解绑,事件监听器已被移除,父组件实例不再可用。

这个顺序确保了子组件能够在父组件完全销毁之前,先进行必要的清理工作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/720686.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【回溯算法】【组合问题】Leetcode 77.组合 216. 组合总和 III

【回溯算法】【回溯算法剪枝】 Leetcode 77.组合 216. 组合总和 III 回溯算法可以解决的问题Leetcode 77.组合解法1 回溯法三部曲,函数参数、终止条件和单层搜索逻辑解法一plus 回溯法剪枝 另一道组合回溯问题 216. 组合总和 III解法:回溯解法&#xff1…

ArcGIS学习(十一)公服设施服务区划分与评价

ArcGIS学习(十一)公服设施服务区划分与评价 本任务带来的内容是公服设施服务区划分与公服设施服务区评价。本任务包括两个关卡: 公服设施服务区划分公服设施服务区空间价值评价1.公服设施服务区划分 首先,来看看这个案例的场景和基础数据。我们以上海市图书馆为例进行分析…

gitlab-ci_cd语法CICD

工作原理 1、将代码托管在git 2、在项目根目录创建ci文件.gitlan-ci.yml 在文件中指定构建,测试和部署脚本 3、gitlab将检测到他并使用名为git Runner的工具运行脚本 4、脚本被分组为作业,他们共同组成了一个管道gitlab-ci的脚本执行,需要自…

LINUX SPL UBOOT LINUX 调试串口shell 终端修改笔记(未完成准备测试后更新)

由于硬件修改需要将UART0 修改为UART3作为输出: 部分知识点 串行端口终端(serial port terminal): 指使用计算机串行端口连接的终端设备, /dev/ttySn伪终端(pseudo terminal): 通常是通过ssh登陆的终端, /dev/pts/*控…

数据结构(一)——概述

一、绪论 1.1数据结构的基本概念 数据:用来描述客观事物的数、计算机中是字符及所有能输入并被程序识别和处理的符号的集合。 数据元素:数据的基本单位,一个数据元素可由若干数据项组成。 数据结构:指相互之间存在一种或多种特…

Jetty的http模块

启用http模块,执行如下命令: java -jar $JETTY_HOME/start.jar --add-moduleshttp查看http模块的配置文件,执行如下命令: cat $JETTY_BASE/start.d/http.ini输出如下: # --------------------------------------- #…

VR 全景模式OpenGL原理

VR 全景模式OpenGL原理 VR 全景模式原理 VR 全景模式原理将画面渲染到球面上,相当于从球心去观察内部球面,观察到的画面 360 度无死角,与普通播平面渲染的本质区别在渲染图像部分,画面渲染到一个矩形平面上,而全景需…

啤酒:精酿啤酒与烤串的夜晚滋味

夏日的夜晚,微风拂面,星光璀璨。此时,能抚慰人心的莫过于与三五好友围坐一起,享受烤串与Fendi Club啤酒的美味。这种滋味,不仅仅是味蕾的盛宴,更是心灵的满足。 Fendi Club啤酒,每一滴都蕴含着大…

Apache SeaTunnel 2.3.4 版本发布:功能升级,性能提升

​Apache SeaTunnel团队自豪地宣布2.3.4版本正式发布!本次更新聚焦于增强核心功能,改善用户体验,并进一步优化文档质量。 此次版本发布带来了多项重要更新和功能增强,包括核心与API的修复、文档的全面优化、Catalog支持的引入&…

【CSS】(浮动定位)易忘知识点汇总

浮动特性 加了浮动之后的元素,会具有很多特性,需要我们掌握的. 1、浮动元素会脱离标准流(脱标:浮动的盒子不再保留原先的位置) 2、浮动的元素会一行内显示并且元素顶部对齐 注意: 浮动的元素是互相贴靠在一起的(不会有缝隙)&…

机器学习专项课程03:Unsupervised Learning, Recommenders, Reinforcement Learning笔记 Week02

Week 02 of Unsupervised Learning, Recommenders, Reinforcement Learning 课程地址: https://www.coursera.org/learn/unsupervised-learning-recommenders-reinforcement-learning 本笔记包含字幕,quiz的答案以及作业的代码,仅供个人学习…

二刷代码随想录——贪心day37

文章目录 前言贪心知识点贪心的套路 贪心一般解题步骤一、738. 单调递增的数字二、968. 监控二叉树总结 前言 一个本硕双非的小菜鸡,备战24年秋招,计划二刷完卡子哥的刷题计划,加油! 二刷决定精刷了,于是参加了卡子哥…

java输出单片机ARGB8565格式的图片文件

ARGB8565格式的定义 ARGB8565 是一种颜色编码格式,它结合了 alpha(透明度)通道和 RGB(红绿蓝)颜色通道。在这种格式中,每个像素由 32 位表示,其中 alpha 通道占用 8 位,红色、绿色和…

YOLOv9独家改进|使用HWD(小波下采样)模块改进ADown

专栏介绍:YOLOv9改进系列 | 包含深度学习最新创新,主力高效涨点!!! 一、改进点介绍 HWD是一种下采样模型,应用了小波变换的方法。 ADown是YOLOv9中的下采样模块,对不同的数据场景具有一定的可学…

no declaration can be found for element ‘rabbit:connection-factory‘

spring-mvc 配置 rabbitmq 出现问题。 我的解决方案如下: 1 找到配置文件 spring-rabbitmq.xml 我的配置文件叫:spring-rabbitmq.xml,你们按照自己的查找。 2 定位如下URI 接着 Ctrl鼠标左键 3 确定spring-rabbit-x.x.xsd 按照步骤2 &…

uniapp同步将本地图片转换为base64,支持微信、H5、APP

接上篇,少了一个方法的源代码。 先上代码: ploadFilePromiseSync (url) > { return new Promise((resolve, reject) > { // #ifdef MP-WEIXIN uni.getFileSystemManager().readFile({ filePath: url, encoding: base64, success: res > { let …

Rabbitmq消息丢失-生产者消息丢失(一)

说明:消息生产者在将数据发送到Mq的时候,可能由于网络等原因造成数据投递失败。 消息丢失大致分三种:这里说的是生产者消息丢失! 分析原因: 1.有没有一种可能,我刚发送消息,消息还没有到交换…

MySQL中有事务无法回滚的语句?

目录 0.从修改表结构语句开始 1.DDL(Data Definition Language) 数据定义语言 2.DCL(Data Control Language) 数据控制语言 3.在该事务还没提交时开启新事务 4.锁操作 5.行政声明语句 6.主从复制的从机操作 7.如何避免出现隐式提交导致的错误 0.从修改表结构语句开始 试…

tomcat nginx 动静分离

实验目的:当访问静态资源的时候,nginx自己处理 当访问动态资源的时候,转给tomcat处理 第一步 关闭防火墙 关闭防护 代理服务器操作: 用yum安装nginx tomcat (centos 3)下载 跟tomcat(centos 4&#xff0…

Ansible-Playbook

目录 1、概念介绍 roles 角色 playbook 核心元素 ansible-playbook 命令 playbook 简单案例 2、Ansible 变量 自定义变量 facts 变量 Palybook 部署 LAMP ansible 端安装 LAMP playbook 系统环境脚本 构建 httpd 任务 构建 mariadb 任务 构建 php 任务 编写整个任务…