vue的生命周期和执行顺序

news/2024/5/16 23:45:15/文章来源:https://blog.csdn.net/qq_43886365/article/details/131764421

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.luyixian.cn/news_show_332608.aspx

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

相关文章

truffle 进行智能合约测试

0字 本方法使用了可视化软件Ganache 前两步与不使用可视化工具的步骤是一样的&#xff08;有道云笔记&#xff09;&#xff0c;到第三步的时候需要注意&#xff1a; 在truffle插件下找到networks目录&#xff0c;提前打开Ganache软件 在Ganache中选择连接或者新建&#xff0…

Django实现接口自动化平台(十二)自定义函数模块DebugTalks 序列化器及视图【持续更新中】

上一章&#xff1a; Django实现接口自动化平台&#xff08;十一&#xff09;项目模块Projects序列化器及视图【持续更新中】_做测试的喵酱的博客-CSDN博客 本章是项目的一个分解&#xff0c;查看本章内容时&#xff0c;要结合整体项目代码来看&#xff1a; python django vue…

Redis : zmalloc.h:50:31: 致命错误:jemalloc/jemalloc.h:没有那个文件或目录

In file included from adlist.c:34:0: zmalloc.h:50:31: 致命错误&#xff1a;jemalloc/jemalloc.h&#xff1a;没有那个文件或目录 #include <jemalloc/jemalloc.h> 解决 : 如上图使用命令 make MALLOClibc

视频卡通化技术路线

神经风格迁移&#xff1a;用深度神经网络生成风格化图像&#xff0c;通过捕获到的图像中的内容表征对输出图像做约束&#xff0c;就是输入图像和目标图像通过vgg提取的特征做约束。 GAN图像翻译&#xff1a;Image-to-image translation&#xff0c;主要基于conditional GAN&am…

Redis分布式锁的演变历程

什么时候用分布式锁 当并发去读写一个【共享资源】的时候&#xff0c;我们为了保证数据的正确&#xff0c;需要控制同一时刻只有一个线程访问。 分布式锁就是用来控制同一时刻&#xff0c;只有一个 JVM 进程中的一个线程可以访问被保护的资源。 分布式锁入门 分布式锁应该满足…

【C++修炼之路】list 模拟实现

&#x1f451;作者主页&#xff1a;安 度 因 &#x1f3e0;学习社区&#xff1a;StackFrame &#x1f4d6;专栏链接&#xff1a;C修炼之路 文章目录 一、读源码二、成员三、默认成员函数1、构造2、析构3、拷贝构造4、赋值重载 四、迭代器五、其他接口 如果无聊的话&#xff0c;…

RocketMQ环境搭建

环境搭建 环境准备 下载地址: https://downloads.apache.org/rocketmq/4.9.5/安装 上传至服务器 mkdir /usr/soft #上传至此目录/usr/softmkdir /usr/soft 解压 cd /usr/soft unzip rocketmq-all-4.9.5-bin-release.zip移动 mkdir /usr/local/rocketmq cd /usr/soft mv r…

Kubernetes - kubeadm部署

Kubernetes - kubeadm部署 1 环境准备1.1 在各个节点上配置主机名&#xff0c;并配置 Hosts 文件1.2 关闭防护墙&#xff0c;禁用selinux&#xff0c;关闭swap1.3 配置免密登录1.4 配置内核参数1.5 配置br_netfilter 2. 安装K8s2.1 安装docker(各节点)2.2 安装K8s组件(各节点)2…

安达发|如何选择更适合我们的APS高级排程软件

如何选择aps高级排程公司更适合我们?在选购aps高级排程的时候&#xff0c;一些朋友由于不清楚其中的选购技巧&#xff0c;许多时候会掉入些许选择误区&#xff0c;导致我们买不了合适我们选择的aps高级排程。因此选择适合我们的aps高级排程就变得十分重要&#xff0c;唯有明白…

使用typora+PicGo+Gitee简单实现图片上传功能

本文通过配置PicGoGitee来实现typora图片上传功能&#xff0c;系统是window 注意下载的清单有&#xff1a;PicGo&#xff0c;node.js&#xff0c;配置有&#xff1a;PicGo&#xff0c;node.js&#xff0c;gitee&#xff0c;typora 看着复杂实际上并不难&#xff0c;只是繁琐&am…

Django项目开发快速入门

Django项目开发快速入门 生成Django项目编写module后台管理系统admin自定义管理页面视图函数使用Django模板 生成Django项目 现在cmd中使用命令安装Django框架 pip install django3.2使用命令生成项目 django-admin startproject DjStore使用命令生成应用 python .\manage.…

学生成绩管理系统|Python小应用练习

题目要求 实现学生成绩管理系统 输入学生成绩信息序列&#xff0c;获得成绩从高到低、从低到高、按某一门成绩的排列,相同成绩都按先录入排列在前的规则处理。 数据如下&#xff1a;(数据规则&#xff1a;学生姓名 高数成绩 英语成绩 大物成绩) SanZhang 70 80 61 SiLi 86 77 …

CS 144 Lab Zero -- 可靠的内存字节流

CS 144 Lab Zero -- 可靠的内存字节流 环境搭建使用socket写一个网络程序In-memory reliable byte stream 对应课程视频: 【计算机网络】 斯坦福大学CS144课程 Lab 0 对应的PDF: Lab Checkpoint 0: networking warmup Lab 0 会省去Telnet部分内容。 环境搭建 Run Ubuntu ver…

golang 日志库logrus实践

logrus完全兼容标准的log库&#xff0c;还支持文本、JSON 两种日志输出格式。很多知名的开源项目都使用了这个库&#xff0c;如大名鼎鼎的 docker。 快速使用 第三方库需要先安装&#xff1a; $ go get github.com/sirupsen/logrus 后使用&#xff1a; package mainimport (&qu…

go语言终端交叉编译的事项windows编译其它平台软件包

交叉编译的终极版本[以此为准]&#xff1a; windows编译窗口目前分为cmd窗口&#xff0c;powershell窗口&#xff0c;这两个里面运行的命令不一样。 1.cmd窗口编译&#xff1b; 在windows10之前的系统版本上使用cmd命令行可以使用命令 CMD命令行中 在CMD命令行中编译&#…

HarmonyOS/OpenHarmony应用开发-程序包多HAP机制(下)

三、多HAP的开发调试与发布部署流程 &#xff08;一&#xff09;多HAP的开发调试与发布部署流程如下图所示。 图1 多HAP的开发调试与发布部署流程 &#xff08;二&#xff09;开发 开发者通过DevEco Studio工具按照业务的需要创建多个Module&#xff0c;在相应的Module中完成…

抖音seo源码搭建,抖音矩阵系统源码分发,抖音矩阵账号管理

前言&#xff1a; 抖音seo源码&#xff0c;抖音矩阵系统源码搭建&#xff0c;抖音矩阵同步分发。抖音seo源码部署是需要对接到这些正规接口再来做开发的&#xff0c;目前账号矩阵程序开发的功能&#xff0c;围绕一键管理多个账号&#xff0c;做到定时投放&#xff0c;关键词自动…

spring复习:(40)全注解的spring AOP

零、需要的依赖&#xff1a; <dependency><groupId>org.aspectj</groupId><artifactId>aspectjrt</artifactId><version>1.8.9</version></dependency><dependency><groupId>org.aspectj</groupId><arti…

OpenCv之图像形态学

目录 一、形态学 二、图像全局二值化 三、自适应阈值二值化 四、腐蚀操作 五、获取形态学卷积核 六、膨胀操作 七、开运算 八、闭运算 一、形态学 定义: 指一系列处理图像形状特征的图像处理技术形态学的基本思想是利用一种特殊的结构元(本质上就是卷积核)来测量或提取输…

11.Ceph 对象存储系统 RGW 接口

文章目录 Ceph 对象存储系统 RGW 接口概念逻辑单位创建RGW接口开启httphttps创建RadosGW账户S3接口访问测试 Ceph 对象存储系统 RGW 接口 概念 对象存储&#xff08;object storage&#xff09;是非结构数据的存储方法&#xff0c;对象存储中每一条数据都作为单独的对象存储&…