当前位置：首页 > news >正文

vue子组件生命周期的执行顺序

news 来源：原创 2025/7/1 10:08:21

在 Vue 中，子组件的生命周期钩子函数的执行顺序受父组件的影响，通常遵循**“先创建子组件，后创建父组件；先销毁父组件，后销毁子组件”**的原则。

1. 组件创建（挂载）阶段

当父组件挂载时，子组件的生命周期钩子执行顺序如下：

执行顺序

父组件的 beforeCreate
父组件的 created
父组件的 beforeMount
子组件的 beforeCreate
子组件的 created
子组件的 beforeMount
子组件的 mounted
父组件的 mounted

说明

先创建 父组件的实例（beforeCreate 和 created），但此时模板还未编译，子组件还未初始化。
在 父组件的 beforeMount 过程中，Vue 发现了子组件标签，于是开始初始化子组件。
子组件的 beforeCreate 和 created 先执行，然后子组件挂载到 DOM，触发 mounted。
子组件 mounted 结束后，才执行父组件的 mounted。

2. 组件更新（更新）阶段

当父组件的 data 发生变化，触发重新渲染时，执行顺序如下：

执行顺序

父组件的 beforeUpdate
子组件的 beforeUpdate
子组件的 updated
父组件的 updated

说明

由于父组件的 data 变更，先触发 父组件的 beforeUpdate。
发现子组件的 props 可能也受影响，因此进入 子组件的 beforeUpdate。
子组件完成更新后，执行 子组件的 updated。
最后，执行 父组件的 updated。

3. 组件销毁（卸载）阶段

当父组件被销毁时，子组件的生命周期钩子执行顺序如下：

执行顺序

父组件的 beforeDestroy
子组件的 beforeDestroy
子组件的 destroyed
父组件的 destroyed

说明

销毁时是“先父后子”调用 beforeDestroy，但先销毁子组件，再销毁父组件。
子组件 beforeDestroy 先执行，随后 destroyed 触发。
最后执行 父组件的 destroyed。

总结

完整生命周期执行顺序

阶段	父组件	子组件
创建前	`beforeCreate`	-
创建后	`created`	-
挂载前	`beforeMount`	-
子组件创建前	-	`beforeCreate`
子组件创建后	-	`created`
子组件挂载前	-	`beforeMount`
子组件挂载后	-	`mounted`
父组件挂载后	`mounted`	-
更新前	`beforeUpdate`	`beforeUpdate`
更新后	`updated`	`updated`
销毁前	`beforeDestroy`	`beforeDestroy`
销毁后	`destroyed`	`destroyed`

核心原则

子组件的 beforeCreate、created、beforeMount 在父组件 beforeMount 之后执行。
子组件的 mounted 在父组件 mounted 之前执行。
子组件的 beforeDestroy、destroyed 在父组件 beforeDestroy 之后执行（即先销毁子组件，再销毁父组件）。

这个顺序对于组件通信、数据流管理等很重要，尤其在 mounted 钩子里可能需要访问子组件的 DOM 或数据时，需要注意时机。

如果你是用 Vue 3，beforeDestroy 和 destroyed 被替换为 onBeforeUnmount 和 onUnmounted，但执行顺序逻辑仍然一样。

vue子组件生命周期的执行顺序

在 Vue 中，子组件的生命周期钩子函数的执行顺序受父组件的影响，通常遵循**“先创建子组件，后创建父组件；先销毁父组件，后销毁子组件”**的原则。 1. 组件创建（挂载）阶段当父组件挂载时&#x…...

编程日记 2025/7/1 10:08:21

【含文档+PPT+源码】基于微信小程序的在线考试与选课教学辅助系统

项目介绍本课程演示的是一款基于微信小程序的在线考试与选课教学辅助系统，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含：项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本套系统…...

编程日记 2025/7/1 4:47:39

树莓派超全系列文档--(17)树莓派配置显示器

树莓派配置显示器显示支持 HDMI 显示器设置分辨率和旋转手动设置分辨率和旋转确定显示设备名称设置自定义分辨率设置自定义旋转控制台分辨率和旋转文章来源： http://raspberry.dns8844.cn/documentation 原文网址显示要配置 Raspberry Pi 使用非默认显示模式…...

编程日记 2025/6/29 15:15:39

python将pdf文件转为图片，如果pdf文件包含多页，将转化的多个图片通过垂直或者水平合并成一张图片

要将PDF文件转换为图片，并将多页PDF垂直合并成一张图片，可以使用PyMuPDF（也称为fitz）库来读取PDF文件，并使用Pillow库来处理和合并图片。以下是一个示例代码，展示了如何实现这个功能： 首先&…...

编程日记 2025/6/28 1:31:30

JVM基础原理

JVM是一个虚拟化的计算机，它可以执行Java字节码文件（.class文件），实现Java程序跨平台的特性。JVM负责将Java程序的字节码翻译成具体操作系统的机器码，从而能够在不同的平台上运行。JVM的核心原理涉及以下几个重要方面 …...

编程日记 2025/6/30 23:29:57

Miniforge3高效管理 Python环境：2025年最新实践指南

Miniforge3 高效管理 Python 环境：2025 年最新实践指南在现代开发中，灵活高效地管理 Python 环境至关重要。Miniforge3 作为一款轻量级 Conda 管理工具，不仅默认采用更新更快的 conda-forge 软件源，还对 ARM 架构（例如 Apple M1/M2/M3）有着出色的适配性。相比于传统的 …...

编程日记 2025/7/1 10:03:35

31天Python入门——第17天:初识面向对象

你好，我是安然无虞。文章目录面向对象编程1. 什么是面向对象2. 类(class)3. 类的实例关于self 4. 对象的初始化5. __str__6. 类之间的关系继承关系组合关系 7. 补充练习面向对象编程 1. 什么是面向对象面向对象编程是一种编程思想,它将现实世界的概念和关系映…...

编程日记 2025/7/1 10:04:24

困于环中的机器人

************* c topic: 1041. 困于环中的机器人 - 力扣（LeetCode） ************* Inspect the topic first. And it looks really familiar with another robot topic. 657. 机器人能否返回原点 - 力扣（LeetCode）https://lee…...

编程日记 2025/6/29 8:35:27

阿里 FunASR 开源中文语音识别大模型应用示例（准确率比faster-whisper高）

文章目录 Github官网简介模型安装非流式应用示例流式应用示例 Github https://github.com/modelscope/FunASR 官网 https://www.funasr.com/#/ 简介 FunASR是一个基础语音识别工具包，提供多种功能，包括语音识别（ASR）、语音端…...

编程日记 2025/6/28 5:28:02

spring boot前后端开发上传文件时报413(Request Entity Too Large)错误的可能原因及解决方案

可能原因及解决方案 1. Spring Boot默认文件大小限制原因：Spring Boot默认单文件最大为1MB，总请求体限制为10MB。解决方案： 在application.properties中配置：spring.servlet.multipart.max-file-size10MB # 单文件最大 spring…...

编程日记 2025/7/1 9:00:02

Transformer：破局山地暴雨预测的「地形诅咒」--AI智能体开发与大语言模型的本地化部署、优化技术

极端降雨预测的技术痛点与边缘破局 1. 传统预警系统的三重瓶颈‌ ‌延迟致命‌：WRF模式在1km分辨率下3小时预报耗时>45分钟，错过山洪黄金响应期 ‌地形干扰大‌：复杂地形区（如横断山脉）降水预测误差超50% ‌数据…...

编程日记 2025/7/1 8:54:29

游戏引擎学习第187天

看起来观众解决了上次的bug 昨天遇到了一个相对困难的bug，可以说它相当棘手。刚开始的时候，没有立刻想到什么合适的解决办法，所以今天得从头开始，逐步验证之前的假设，收集足够的信息，逐一排查可能的原因&a…...

编程日记 2025/6/28 4:34:14

05-02-自考数据结构（20331）- 动态查找-知识点

自考数据结构动态查找算法主要讲二叉树和平衡二叉树，但是感觉到了，就又续接了一部分，所以这篇备考的小伙伴着重看前两种就可以了。知识拓扑知识点介绍二叉排序树(BST) 定义二叉排序树(Binary Search Tree)又称二叉查找树，它或者是一棵空树，或者是具有下列性质的二…...

编程日记 2025/6/28 1:23:14

PyQt6实例_批量下载pdf工具_使用pyinstaller与installForge打包成exe文件

目录前置： 步骤： step one 准备好已开发完毕的项目代码 step two 安装pyinstaller step three 执行pyinstaller pdfdownload.py，获取初始.spec文件 step four 修改.spec文件，将data文件夹加入到打包程序中 step five 增加…...

编程日记 2025/6/28 1:23:18

NVR接入录像回放平台EasyCVR视频融合平台城市/乡镇污水处理厂解决方案

一、方案背景随着经济的快速发展和城市化的加快，城市污水排放量急剧增加，给城市环境和粮食安全带来了威胁。因此，污水处理厂的建设和高效运营成为对城市环境保护的重要任务。目前，国内许多城市虽已建成污水处理系统&#xff0…...

编程日记 2025/6/28 1:30:36

Vue2 vs Vue3 生命周期全面对比：created 的进化与革新！！！

🎯 Vue2 vs Vue3 生命周期全面对比：created 的进化与革新 🔥 核心差异全景图一、钩子函数命名与定位变化 1. 命名规范革新 Vue2 钩子Vue3 钩子 (Options API)Vue3 Composition APIbeforeCreate❌ 无setup() 替代created✅ 保留setup() 替代…...

编程日记 2025/7/1 8:36:13

Ubuntu 22.04安装MongoDB：GLM4模型对话数据收集与微调教程

在Ubuntu 22.04安装MongoDB Community Edition的教程请点击下方链接进行参考： 点击这里获取MongoDB Community Edition安装教程今天将为大家带来如何微调GLM4模型并连接数据库进行对话的教程。快跟着小编一起试试吧~ 1. 大模型 ChatGLM4 微调步骤 1.1 从 github…...

编程日记 2025/6/28 4:01:42

并查集（Union-Find Set）课程笔记

目录 1. 并查集原理 2. 并查集的实现 3. 并查集应用应用 1：省份数量问题应用 2：等式方程的可满足性 1. 并查集原理并查集用于处理需要将不同元素划分成若干不相交集合的问题。最开始时，每个元素都是单独的一个集合，随后根…...

编程日记 2025/6/28 5:24:53

算法刷题记录——LeetCode篇(1.4) [第31~40题](持续更新)

更新时间：2025-03-29 算法题解目录汇总：算法刷题记录——题解目录汇总技术博客总目录：计算机技术系列博客——目录页优先整理热门100及面试150，不定期持续更新，欢迎关注！ 32. 最长有效括号给你一个只包…...

编程日记 2025/6/30 20:02:08

【区块链安全 | 第十四篇】类型之值类型（一）

文章目录值类型布尔值整数运算符取模运算指数运算定点数地址（Address）类型转换地址成员balance 和 transfersendcall，delegatecall 和 staticcallcode 和 codehash 合约类型（Contract Types）固定大小字节数组&#x…...

编程日记 2025/6/28 1:23:25

一款超级好用且开源免费的数据可视化工具——Superset

认识Superset 数字经济、数字化转型、大数据等等依旧是如今火热的领域，数据工作有一个重要的环节就是数据可视化。看得见的数据才更有价值！ 现如今依旧有多数企业号称有多少多少数据，然而如果这些数据只是呆在冷冰冰的数据库或文件内则毫无…...

编程日记 2025/6/28 1:23:47

android gradle一直编译不下来，可能是打开了gradle离线模式

gradle离线模式当然，如果本地已经将gradle，lib都下载下来了，也可以打开这个离线模式，不然重启AS的时候可能会重新走一次下载流程...

编程日记 2025/6/28 1:23:26

（C语言）学生信息表（学生管理系统）（基于通讯录改版）（正式版）（C语言项目）

1.首先是头文件： //student.h //头文件//防止头文件被重复包含#pragma once//宏定义符号常量，方便维护和修改 #define ID_MAX 20 #define NAME_MAX 20 #define AGE_MAX 5 #define SEX_MAX 5 #define CLA_MAX 20 //定义初始最大容量 #define MAX 1//定义结…...

编程日记 2025/6/28 1:27:41

【Linux】Linux 系统启动流程详解

1. BIOS/UEFI 阶段硬件自检（POST） BIOS/UEFI 执行硬件检查（内存、CPU、外设等）。若硬件异常，通过蜂鸣码或屏幕提示错误。选择启动设备按配置顺序（硬盘、U盘、网络等）寻找可引导设备。BIOS&a…...

编程日记 2025/6/28 1:27:31

Jetson 设备卸载 OpenCV 4.5.4 并编译安装 OpenCV 4.2.0

‌一、卸载 OpenCV 4.5.4‌ 清除已安装的 OpenCV 库‌ sudo apt-get purge libopencv* python3-opencv # 卸载所有APT安装的OpenCV包‌:ml-citation{ref"1,3" data"citationList"}sudo apt autoremove # 清理残留依赖‌:ml-citation{ref"1,4"…...

编程日记 2025/6/28 6:29:56

【计算机网络】OSI七层模型完全指南：从比特流到应用交互的逐层拆解

OSI模型导读一、概念二、模型层次结构2.1 物理层（Physical Layer）2.2 数据链路层（Data Link Layer）2.3 网络层（Network Layer）2.4 传输层（Transport Layer）2.5 会话层&…...

编程日记 2025/6/27 21:24:54

渗透测试：登录页面的测试-弱口令思路和实战

渗透测试：登录页面的测试思路和实战渗透测试（Penetration Testing），也称为“渗透性测试”，是一种评估计算机系统、网络或Web应用安全性的一种方法。它通过模拟真实世界中的攻击手段和策略，来检测目标系统…...

编程日记 2025/6/28 3:45:27

Android BottomNavigationView 完全自定义指南：图标、文字颜色与选中状态

1. 核心功能概述通过 Material Design 的 BottomNavigationView，你可以轻松实现以下自定义： ✅ 动态切换选中/默认图标 ✅ 自定义选中与默认文字颜色 ✅ 控制文字显示模式（始终显示/仅选中显示/自动隐藏） ✅ 添加动画和高级样…...

编程日记 2025/6/28 1:23:24

提示词工程

参考网站：提示工程指南 – Nextra 声明：我现在也才刚刚开始学习人工智能，我会着重于 agent 的学习，如果有不对的地方请大家及时指出。模型设置前言在向大模型发送请求时，常常能看到以下参数： {&qu…...

编程日记 2025/6/28 4:08:59

分页查询原理与优化方案完全指南

分页查询原理与优化方案完全指南一、分页查询基础原理 1.1 传统分页实现方式分页查询的核心目的是将大数据集分割成多个小块进行展示，最常见的实现方式是使用LIMIT-OFFSET语法： -- 基础分页查询 SELECT * FROM table_name ORDER BY id LIMIT page_size OFFSET (page_n…...

编程日记 2025/6/29 9:53:23

嵌入式软件设计规范框架（MISRA-C 2012增强版）

以下是一份基于MISRA-C的嵌入式软件设计规范（完整技术文档框架），包含编码规范、安全设计原则和工程实践要求： 嵌入式软件设计规范（MISRA-C 2012增强版） 一、编码基础规范 1.1 文件组织头文件保护 /* 示…...

编程日记 2025/6/28 1:27:51

课程6. 决策树

课程6. 决策树决策树直觉模型结构几何解释决策树的构建ID3算法信息内容标准使用决策树处理差距推广到回归问题分支标准与经典损失函数的关系过度拟合和欠拟合欠拟合过拟合优点和缺点案例随机生成数据集分类IRIS 数据集解决回归问题的一个简短例子决策树今天我们继续探索一…...

编程日记 2025/6/28 1:23:30

【UE5.3.2】初学1：适合初学者的入门路线图和建议

3D人物的动作制作大神分析：3D人物的动作制作通常可以分为以下几个步骤：角色绑定（Rigging）：将3D人物模型绑定到一个骨骼结构上，使得模型能够进行动画控制。动画制作（Animation）：通过控制骨骼结构，制作出人物的各种动作，例如走路、跳跃、打斗等。动画编辑（Ani…...

编程日记 2025/6/30 20:35:27

OpenCV 图形API（4）内核 API

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 G-API 背后的核心理念是可移植性——使用 G-API 构建的流水线必须是可移植的（或者至少具备可移植的能力）。这意味着&…...

编程日记 2025/6/30 20:15:11

pom.xml与.yml，java配置参数传递

pom.xml与 .yml java配置参数传递在Java项目中，通过 pom.xml 和 .yml 文件（如 application.yml）传递变量通常涉及构建时（Maven）和运行时（Spring Boot）两个阶段的配置。以下是具体的实现方法&…...

编程日记 2025/6/28 4:23:46

LeetCode算法题(Go语言实现)_21

题目给你一个整数数组 arr，如果每个数的出现次数都是独一无二的，就返回 true；否则返回 false。一、代码实现 func uniqueOccurrences(arr []int) bool {freq : make(map[int]int)// 统计每个数字的出现次数for _, num : range arr {freq[n…...

编程日记 2025/6/30 5:00:35

Docker部署前后端分离项目

镜像下载在有网络的电脑下载镜像（Windows）：依次在CMD命令台执行以下代码 docker pull node:20docker pull openjdk:22-jdkdocker pull mysql:8.0docker pull nginx:1.27 删除镜像代码： docker rmi node:latest 查看镜像列表…...

编程日记 2025/6/28 1:57:53

Linux系统安装MySQL 8.0完整指南（新手友好版）

MySQL作为最流行的开源关系型数据库之一，广泛应用于各种开发和生产环境。本教程将详细介绍在Linux系统上安装MySQL 8.0的全过程，包括卸载旧版本、安装新版本、基础配置和远程连接设置，特别适合Linux新手学习使用。一、卸载旧版MySQL&#x…...

编程日记 2025/6/28 1:23:44

#创建表，把id设为主键 mysql> create table test02(-> id int primary key, #----主键约束-> name varchar(50)-> ); Query OK, 0 rows affected (0.02 sec) #插入数据测试 mysql> insert into test02 values(1,"成都"); Query OK, 1 r…...

编程日记 2025/6/27 8:31:34

AI大模型下传统 Spring Java工程开发的演进和变化方向

1. 背景和动因传统Spring开发优势：Spring生态以稳定、模块化、依赖注入（DI）等特性著称，长期支撑企业级应用开发，具备高扩展性和可维护性。AI大模型崛起：近几年，LLM（如GPT-4、LLaMA…...

编程日记 2025/6/28 2:21:51

周学习总结

这周继续学习了Java的知识点，还写了考查递归、递推与贪心的算法题。算法小结递归与递推一般是观察观察题干，分析题目的规律，可能还会用到分治算法，推导出一个合理的表达式，再使用函数递归来进行求解。贪心在求解时…...

编程日记 2025/6/28 1:26:02

‌19.思科路由器：OSPF协议引入直连路由的实验研究

思科路由器：OSPF协议引入直连路由的实验研究一、实验拓扑二、基本配置2.1、sw1的配置2.2、开启交换机三层功能三、ospf的配置3.1、R1的配置3.2、R2的配置3.3、重启ospf进程四、引入直连路由五、验证结果随着互联网技术的不断发展，路由器作为网络互联的关键设备，其性能与稳定…...

编程日记 2025/6/28 1:24:34

Zcanpro搭配USBCANFD-200U在新能源汽车研发测试中的应用指南（周立功/致远电子）

——国产工具链的崛起与智能汽车测试新范式引言：新能源汽车测试的国产化突围随着新能源汽车智能化、网联化程度的提升，研发测试面临三大核心挑战：多协议融合（CAN FD/LIN/以太网）、高实时性数据交互需求、复杂工况下…...

编程日记 2025/6/28 1:23:31

JSON的基础知识

文章目录前言json协议的基本格式json 数组类型的语法规则json协议报文的实例json常见的一些格式错误在gd32中使用cjson库小结前言 json协议在互联网应用，物联网应用中都会用到。所谓工欲善其事必先利其器，我们需要学习了解json协议的具体格式&#xf…...

编程日记 2025/6/29 19:40:27

week2|机器学习（吴恩达）学习笔记

一、多维特征 1.1、什么是多维特征？ 1）在我们的原始估计房价的版本中，我们只有一个变量： x x x 来预估 y y y 2）但是现在假设你也知道其他的参数变量，那么我们就可以引入多个参数来提高预测 y y y的准确…...

编程日记 2025/6/27 21:03:44

各类神经网络学习：（七）GRU 门控循环单元（上集），详细结构说明

上一篇下一篇LSTM（下集）GRU（下集） GRU（门控循环单元） 它其实是 R N N RNN RNN 和 L S T M LSTM LSTM 的折中版，有关 R N N RNN RNN 和 L S T M LSTM LSTM 请参考往期博客。实际应用要比 …...

编程日记 2025/6/30 12:20:30

uniapp利用第三方（阿里云）实现双人视频/音频通话功能（附完整的项目代码）

要在UniApp中利用阿里云实现双人视频/音频通话功能，你需要使用阿里云的实时音视频服务（RTC）。以下是一个基本的实现步骤和示例代码。基本的操作步骤注册阿里云账号并开通RTC服务：访问阿里云官网，注册账号并开通RTC服务。获取AppID和AppKey：在RTC控制台创建应用，…...

编程日记 2025/6/28 5:30:37

wsl2的centos7安装jdk17、maven

JDK安装查询系统中的jdk rpm -qa | grep java按照查询的结果，删除对应版本 yum -y remove java-1.7.0-openjdk*检查是否删除 java -version 下载JDK17 JDK17，下载之后存到wsl目录下（看你自己）然后一键安装 sudo rpm -ivh jd…...

编程日记 2025/6/30 20:33:22