vue的生命周期和执行顺序

news2024/11/25 14:34:22

1,Vue 生命周期都有哪些?

序号生命周期描述
1beforecreate创建前vue实例初始化阶段,不可以访问data,methods; 此时打印出的this是undefined;
2created创建后vue实例初始化完成,可以访问data,methods,但是节点尚未挂载,不能获取dom节点;
3beforeMount挂载前实际上与created阶段类似,同样的节点尚未挂载,此时模板已经编译完成,但还没有被渲染至页面中(即为虚拟dom加载为真实dom)注意的是这是在视图渲染前最后一次可以更改数据的机会,不会触发其他的钩子函数;
4mounted挂载完成这个阶段说说明模板已经被渲染成真实DOM,实例已经被完全创建好了;
5beforeUpdate更新前data里面的数据改动会触发vue的响应式数据更新,也就是对比真实dom进行渲染的过程;
6updated更新完成data中的数据更新完成,dom节点替换完成 ;
7activited在组件被激活时调⽤(使用了 <keep-alive> 的情况下);
8deactivated在组件被销毁时调⽤(使用了 <keep-alive> 的情况下);
9beforeDestroy销毁前销毁前执行($destroy方法被调用的时候就会执行),一般在这里善后:清除计时器、监听等;
10destroyed销毁后销毁后 (Dom元素存在,只是不再受vue控制),卸载watcher,事件监听,子组件;

2,父子组件生命周期执行顺序

  ->父beforeCreate
  ->父created
  ->父beforeMount
  ->子beforeCreate
  ->子created
  ->子beforeMount
  ->子mounted
  ->父mounted

验证如下图

在这里插入图片描述

更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

keep-alive可以实现组件缓存,当组件切换时不会对当前组件进行卸载。

使用keepAlive后生命周期变化(重要):

首次进入缓存页面:beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存页面:beforeRouteEnter --> activated --> deactivated

注意: 配置了keepAlive的页面,在再次进入时不会重新渲染(第一次进来时会触发所有钩子函数),该页面内的组件同理不会再次渲染。

而这可能会导致该组件内的相关操作(那些每次都需要重新渲染页面的操作:如父子组件间的传值)不再生效。 这一点可能会导致一些莫名其妙而又无从查证的bug;

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

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

相关文章

postgresql部署及优化

目录 一、postgresql概念 二、PostgreSQL 特征 三、postgres安装与登录 3.1、postgres安装 3.2、postgres使用 3.3.1、postgres登录 3.3.2、修改postgres用户密码 四、PostgreSQL 命令 4.1、PostgreSQL 创建数据库 4.2、删除数据库 4.3、创建表格 4.4、删除表格 一、…

Bard:Google AI的下一代语言模型,支持多语言、语音朗读、图片解析和更多

说起时下火爆的生成式AI&#xff0c;并不是只有ChatGPT。Bard也是一个很优秀的产品&#xff0c;并且刚刚发布的很多有趣的新功能。文末告诉你如何访问Bard。 Google AI在最近的更新中发布了Bard&#xff0c;一个新的语言模型。Bard支持多种语言&#xff0c;包括中文&#xff0…

Hadoop和hive一键启动脚本

#!/bin/bashcd $HADOOP_HOME/sbinsh ./start-all.shcd $HIVE_HOME/binnohup hive --service metastore & 停止hadoop服务 #!/bin/bashcd $HADOOP_HOME/sbinsh ./stop-all.sh 停止hive服务

Stability AI 把绘画门槛打为 0!

本文由 GPT- 4 所创作&#xff0c;配图由 Stable Doodle 生成。 编者按 Stability AI 上新了&#xff01; 其收购的 Clipdrop 发布了全新的 Stable Doodle 工具&#xff0c;我在使用后最为直观的感受就是 —— 把绘画门槛打下来了。 在 Stable Doodle 之前&#xff0c;使用各…

大型企业数字化信创论坛启幕,金蝶携手500强企业论道数字化变革!

7月14日&#xff0c;“数字中国第二届大型企业数字化信创论坛”在数字化新城成都盛大启幕&#xff0c;中国信通院、金蝶携手来自四川省企业联合会、物产中大集团、浙江省交通投资集团、华彩咨询、四川九洲集团、资阳发展投资集团的大咖、专家论道信创&#xff0c;探索中国企业的…

oc uitableView 展示单组数据

设置模型 #import <Foundation/Foundation.h>interface XMGWine : NSObjectproperty (nonatomic,copy) NSString *name; property (nonatomic,copy) NSString *image; property (nonatomic,copy) NSString *money;(instancetype)wineWithDict:(NSDictionary *)dict; end…

智能会议记录:利用剪映和Claude实现高效会议纪要制作

具体操作步骤可以是: 1、使用录音笔或手机录音将会议过程录制下来。 2、将录音文件上传到pc端&#xff0c;使用剪映程序,利用语音转文本和自然语言处理技术,分析音频&#xff0c;生成文字稿。 3、打开Claude网站。 4、粘贴会议文字。 5、输入提示词&#xff1a; 用中文总结该…

代理模式【静态代理和动态代理实现业务功能扩展】

静态代理 我们在不修改业务的情况下想要给它增加一些功能&#xff0c;这就需要使用代理模式。我们不会在原有业务上直接修改&#xff0c;为了避免修改导致程序不可逆转的破坏。三种角色&#xff1a;抽象角色-接口、真实角色-实现类和代理角色-代理类。真实角色和代理角色继承的…

ARM 架构是什么?

ARM&#xff08;Advanced RISC Machines&#xff09;架构是一种处理器架构&#xff0c;它是一种精简指令集计算机&#xff08;RISC&#xff09;架构。ARM架构最初由ARM Holdings&#xff08;现在是SoftBank Group的子公司&#xff09;开发&#xff0c;并在1980年代末和1990年代…

K8s核心概念 Controller

K8s核心概念 Controller Kubernetes核心概念 Controller一、pod控制器controller1.1 Controller作用及分类1.2 Deployment1.2.1 Replicaset控制器的功能1.2.2 Deployment控制器的功能1.2.3 Deployment用于部署无状态应用1.2.4 创建deployment类型应用1.2.5 访问deployment1.2.6…

SpringCloud集成Sleuth+Zipkin进行链路追踪

关于微服务链路追踪的一些概念&#xff1a;【分布式链路追踪】 文章目录 1、整合Seluth2、日志信息分析3、Zipkin介绍4、Zipkin服务端安装5、搭配Sleuth整合客户端Zipkin6、收集数据7、存储trace数据 1、整合Seluth Spring Cloud Sleuth是一个用于追踪的工具&#xff0c;它可以…

ThinkPHP 多对多关联

用多对多关联的前提 如果模型 A 多对多关联模型 C&#xff0c;必须存在一张中间表 B 记录着双方的主键&#xff0c;因为就是靠着这张中间表 B 记录着模型 A 与模型 C 的关系。 举例&#xff0c;数据表结构如下 // 商品表 goodsgoods_id - integer // 商品主键goods_name - va…

【C#】并行编程实战:使用延迟初始化提高性能

在前面的章节中讨论了 C# 中线程安全并发集合&#xff0c;有助于提高代码性能、降低同步开销。本章将讨论更多有助于提高性能的概念&#xff0c;包括使用自定义实现的内置构造。 毕竟&#xff0c;对于多线程编程来讲&#xff0c;最核心的需求就是为了性能。 延迟初始化 - .NET…

手机怎么编辑pdf?这几款工具可以实现

手机怎么编辑pdf&#xff1f;在如今的数字时代&#xff0c;PDF文档已经成为了一种标准的文件格式。然而&#xff0c;当我们需要编辑这些PDF文档时&#xff0c;我们往往需要使用电脑上的专业软件&#xff0c;这给我们带来了很大的不便。不过&#xff0c;有许多手机应用程序可以让…

AIGC 大模型纷纷部署,企业如何为 AI 数据降本增效

编辑 | 宋慧 出品 | CSDN 云计算 AIGC 从年初开始持续爆火&#xff0c;国内各种大模型纷纷涌现&#xff0c;其中模型参数轻松突破千亿数量级。模型中数据的形态、部署也是多种多样的&#xff0c;庞大数据量背后的管理和成本不容小觑。 混合数据厂商肯睿 Cloudera 今年相继发布…

设计模式的概述

目录 分类 创建型模式 结构型模式 行为型模式 类之间的关系 关联关系 聚合关系 组合关系 依赖关系 继承关系 实现关系 设计原则 开闭原则 里氏代换原则 依赖倒转原则 接口隔离原则 合成复用原则 一、分类 创建型模式 用于描述“怎样创建对象”&#xff0c;它…

线程池的学习(一)

转载&#xff1a;Java 线程池 线程池的创建方式 方式一&#xff1a;创建单一线程的线程池 newSingleThreadExecutor 特点&#xff1a; 线程池中只包含 1 个线程&#xff0c;存活时间是无限的按照提交顺序执行任务唯一线程繁忙时&#xff0c;新提交的任务会被加入到阻塞队列…

Java springBoot项目报LDAP health check failed

报错内容如下&#xff1a; 在bootstrap.yml文件里加 management:health:ldap:enabled: false 配置。 或者在application.properties文件里加&#xff1a; management.health.ldap.enabledfalse 参考答案&#xff1a;LDAP health check failed 难道没有人遇到这样的问题吗&…

我造了一个新的词汇:信息湍流

信息湍流 信息湍流的简介起因有出现信息湍流的领域如何做信息湍流的计算 信息湍流的简介 在物流学中&#xff0c;一个物体从一个位置到另外一个位置&#xff0c;我们可以通过精确的公式计算来预测出新位置。 而水和气体则是大量一个一个物体组成的新物体&#xff0c;称为&…

Docker安装以及基础镜像的使用

Docker 安装 Docker 要求 CentOS 系统的内核版本高于 3.10 uname -r使用 root 权限登录 su # 输入密码更新 yum yum -y update卸载旧版本的 docker yum remove ‐y docker*安装需要的软件包 yum -y install yum-utils设置 yum 源&#xff0c;并更新 yum 包的索引 yum-config-ma…