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

Vue父组件生命周期和子组件生命周期触发顺序

加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件更新过程
父 beforeUpdate -> 父 updated
销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

挂载阶段

该过程主要涉及 beforeCreate、created、beforeMount、mounted 4 个钩子函数。执行顺序为:
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
一定得等子组件挂载完毕后,父组件才能挂在完毕,所以父组件的 mounted 在最后。

更新阶段

该过程主要涉及 beforeUpdate、updated 2 个钩子函数。注意,当父子组件有数据传递时,才有这个更新阶段执行顺序的比较。执行顺序为:
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

销毁阶段

该过程主要涉及beforeDestroy、destroyed 2 个钩子函数。执行顺序为:
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

特点

Vue 父子组件生命周期钩子的执行顺序遵循:从外到内,再从内到外

生命周期介绍

beforeCreate:实例创建前执行。
el 和 data 都为 undefined,还未初始化。methods、computed 以及 watch 上的数据或方法均不能被访问。

created:实例初始化完成后执行。
页面还没开始渲染,不可访问 DOM 节点。el 仍然为 undefined。但可以操作 data 与 methods 等。可以做一些初始数据的获取,在当前阶段无法与 DOM 进行交互,如果需要,可以通过 $nextTick 来访问 DOM。

beforeMount:挂载前执行。
el 和 data 都初始化了,虚拟 DOM 已经创建完成,即将开始渲染。

mounted:页面渲染完毕时执行。
真实的 DOM 挂载完成,可访问 DOM 节点。可使用 refs 对 DOM 进行操作。也可以向后台发送请求。

beforeUpdate:数据发生更新时执行。
此时 Vue 实例中的数据是最新的了,但是页面中的数据还是旧的,可以在此时进一步更改数据,而不会造成重新渲染。

 updated:数据发生更新导致的 DOM 重新渲染完成时执行。
此时 DOM 已经更新,可以执行 DOM 相关操作

 beforeDestroy:实例销毁前执行。
实例仍然完全可以使用。在此阶段一般进行善后工作,如清除计时器、解除绑定等。

destroyed:实例销毁完成。
实例绑定的所有东西都会被解除,如解除事件监听和对 DOM的数据绑定,所有子实例也统统被销毁,组件被拆解将无法使用。改变 data 也不会再重新渲染,但是 DOM 结构依然存在。 

相关文章:

Vue父组件生命周期和子组件生命周期触发顺序

加载渲染过程 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted子组件更新过程 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated父组件更新…...

DevOps工程师 - 面试手册

DevOps工程师 - 面试手册 岗位概述 DevOps工程师是一种专注于提高软件开发和运维团队协作、提高软件产品交付速度和质量的职位。这种角色要求具备跨领域的知识,以便在开发和运维过程中建立起稳定、可靠的基础设施和自动化流程。 常见的职位招聘描述 负责设计、实…...

Netty内存管理--内存池空间规格化SizeClasses

一、规格化 内存池类似于一个内存零售商, 从操作系统中申请一整块内存, 然后对其进行合理分割, 将分割后的小内存返回给程序。这里存在3个尺寸: 分割尺寸: 底层内存管理的基本单位, 比如常见的以页为单位分配, 但是页的大小是灵活的;申请尺寸: 内存使用者希望申请到的内存大小…...

数据结构刷题(三十):96不同的二叉搜索树、01背包问题理论、416分割等和子集

一、96. 不同的二叉搜索树 1.这个题比较难想递推公式, dp[3],就是元素1为头结点搜索树的数量 元素2为头结点BFS的数量 元素3为头结点BFS的数量 元素1为头结点搜索树的数量 右子树有2个元素的搜索树数量 * 左子树有0个元素的搜索树数量 元素2为头结…...

bash的进程与欢迎讯息自定义

在bash shell中,可以通过多种方式自定义欢迎讯息和提示符。主要有: 修改/etc/profile文件: 该文件在用户登录后执行,定义了PROMPT_COMMAND和PS1提示符。可以修改其内容实现自定义欢迎讯息和提示符。 例如,修改为: bash PROMPT_COMMANDecho -e "\nWelcome to My Bash She…...

本周大新闻|苹果首款MR没有主打卖点;Meta认为AI是AR OS的基础

​本周XR大新闻,AR方面,苹果首款MR或没有主打卖点,反而尽可能支持更多App和服务;扎克伯格表示基于AI的AR眼镜操作系统是下一代计算平台的基础;微软芯片工程VP Jean Boufarhat加入Meta芯片团队;Humane展示了…...

Java中工具类Arrays、Collections、Objects

Arrays Arrays是Java中提供的一个针对数组操作的工具类,所有的方法都是静态的。 大致有这些常用的方法 sort()针对常用的基本数据类型,都能进行排序,byte、char、int、long、float、doubleparallelSort()并行排序,多线程排序&am…...

Docker安装Nginx/Python/Golang/Vscode【亲测可用】

一、docker安装nginx docker安装nginx,安装的是最新版本的:docker pull nginx:latest 创建一个容器:docker run --name my-nginx -p 80:80 -d nginx:latest 开启一个交互模式终端:docker exec -it my-nginx bash 创建django项…...

蓝桥杯2022年第十三届决赛真题-最大数字

蓝桥杯2022年第十三届决赛真题-最大数字 时间限制: 3s 内存限制: 320MB 题目描述 给定一个正整数 N。你可以对 N 的任意一位数字执行任意次以下 2 种操作: 将该位数字加 1。如果该位数字已经是 9,加 1 之后变成 0。 将该位数字减 1。如果该位数字已经…...

smbms项目搭建

目录 1.搭建一个maven web项目 2.配置Tomcat 3.测试项目是否能够跑起来 4.导入项目中会遇到的Jar包 5.项目结构搭建 6.项目实体类搭建 7.编写基础公共类 1.数据库配置文件 2.编写数据库的公共类 3.编写字符编码过滤器 3.1web配置注册 4.导入静态资源 1.搭建一个maven web项目 …...

进程/线程 状态模型详解

前言:最近操作系统复习到线程的状态模型(也可以说进程的状态模型,本文直接用线程来说)时候,网上查阅资料,发现很多文章都说的很不一样,有五状态模型、六状态模型、七状态模型.......虽然都是对的…...

数据结构与算法之队列: Leetcode 621. 任务调度器 (Typescript版)

任务调度器 https://leetcode.cn/problems/task-scheduler/ 描述 给你一个用字符数组 tasks 表示的 CPU 需要执行的任务列表。其中每个字母表示一种不同种类的任务。任务可以以任意顺序执行,并且每个任务都可以在 1 个单位时间内执行完。在任何一个单位时间&#…...

【报错】arXiv上传文章出现XXX.sty not found

笔者在overleaf上编译文章一切正常,但上传文章到arxiv时出现类似于如下报错: 一般情况下观察arxiv的编译log,不通过的原因,很多时候都是由于某一行导入了啥package,引起的报错;但是如果没有任何一个具体的…...

项目合同管理

项目合同管理的基本概念及分类、项目合同签订、项目合同管理以及项目合同索赔处理等内容 信息系统工程的建设过程实际上就是合同的执行和监控的过程 1、项目合同的概念及分类 合同法律关系:权力和义务关系 合同可以是书面形式、口头形式和其他形式 书面形式是指…...

聊聊ClickHouse向量化执行引擎-过滤操作

俄罗斯Yandex开发的ClickHouse是一款性能黑马的OLAP数据库,其对SIMD的灵活运用给其带来了难以置信的性能。本文我们聊聊它如何对过滤操作进行SIMD优化。 基本思想 1、有一个数组data,即ColumnVector::data,存放数据 2、使用uint8类型&#xf…...

数据可视化第二版-拓展-网约车分析案例

文章目录 数据可视化第二版-拓展-网约车分析案例竞赛介绍 1等奖作品-IT从业者张某某的作品结论过程数据和思考数据处理数据探索数据分析方法选择数据分析相关性分析转化率分析分析结论 完单数量分析分析结论 司机数量分析分析结论 时间分析每日订单分析 工作日各时段分析周六日…...

pytest - Getting Start

前言 项目开发中有很多的功能,通常开发人员需要对自己编写的代码进行自测,除了借助postman等工具进行测试外,还需要编写单元测试对开发的代码进行测试,通过单元测试来判断代码是否能够实现需求,本文介绍的pytest模块是…...

( 字符串) 205. 同构字符串 ——【Leetcode每日一题】

❓205. 同构字符串 难度:简单 给定两个字符串 s 和 t ,判断它们是否是同构的。 如果 s 中的字符可以按某种映射关系替换得到 t ,那么这两个字符串是同构的。 每个出现的字符都应当映射到另一个字符,同时不改变字符的顺序。不同…...

python+django+vue消防知识宣传网站

开发语言:Python 框架:django Python版本:python3.7.7 数据库:mysql 数据库工具:Navicat 开发软件:PyCharm 层随着移动应用技术的发展,越来越多的消防单位借助于移动手机、电脑完成生活中的事…...

彻底告别手动配置任务,魔改xxl-job!

分析 改造 1、接口调用 2、创建新注解 3、自动注册核心 4、自动装配 测试 测试后 XXL-Job是一款非常优秀的任务调度中间件,其轻量级、使用简单、支持分布式等优点,被广泛应用在我们的项目中,解决了不少定时任务的调度问题。不仅如此&a…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...

<6>-MySQL表的增删查改

目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表&#xf…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...

【JVM】- 内存结构

引言 JVM:Java Virtual Machine 定义:Java虚拟机,Java二进制字节码的运行环境好处: 一次编写,到处运行自动内存管理,垃圾回收的功能数组下标越界检查(会抛异常,不会覆盖到其他代码…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...

三体问题详解

从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

ios苹果系统,js 滑动屏幕、锚定无效

现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...