vue2、vue3生命周期详解以及对比

文章目录

  • 对比vue2-vue3
  • vue3生命周期
    • 生命周期的主要阶段
    • 详情
  • vue2 生命周期
    • 生命周期钩子函数 总共11个 常用的8个
    • 按照这四个阶段我们对应有八个生命周期钩子函数
    • vue生命周期使用场景

对比vue2-vue3

如果熟悉vue2的话,vue3信手拈来,看图

在这里插入图片描述

vue3生命周期

onMounted()
onUpdated()
onUnmounted()
onBeforeMount()
onBeforeUpdate()
onBeforeUnmount()
onErrorCaptured()
onRenderTracked()
onRenderTriggered()
onActivated()
onDeactivated()
onServerPrefetch()

下面借用官网的一张图介绍vue3 的生命周期,应该会更加详细把
在这里插入图片描述
在这里插入图片描述

生命周期的主要阶段

创建 ---- 在组建创建时执行
挂载 ---- DOM被挂载时执行
更新 ---- 当响应数据被修改时执行
销毁 ---- 在元素被销毁之前立即执行

详情

  • beforecreate和created被setup方法本身所替代,我们在在setup中将会访问到9个生命周期:
  • onBeforeMount:在挂载之前被调用,渲染函数render首次被调用
  • onMounted:组件挂载时调用
  • onBeforeUpdate:数据更新时调用,发生在虚拟DOM打补丁之前。
  • onUpdated:因数据更改导致的虚拟DOM重新渲染和打补丁时调用
  • onBeforeUnmount:在卸载组件实例之前调用,此阶段的实例依旧是正常的。
  • onActivated:被keep-alive缓存的组件激活时调用
  • onDeactivated:被keep-alive缓存的组件停用时调用
  • onErrorCaptured:当捕获一个来自子孙组件的错误时被调用,有三个参数:错误对象、发生错误的组件实例、一个包含错误来源信息的字符串;此钩子会返回false来阻止改错误继续向上传播。

vue2 生命周期

生命周期钩子函数 总共11个 常用的8个

vue生命周期分为四个阶段 分别为:
create 创建
mount 挂载
update 更新
destroy 销毁

按照这四个阶段我们对应有八个生命周期钩子函数

beforeCreate 创建前
created 创建后
beforemount 挂载前
mounted 挂载后
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

这八个生命周期代表组件从创建到销毁一个过程
除了以上八个生命周期之外 还有三个生命周期 deactivated activated errorCaptured (这三个声明周期不常用)

        vue每一个组件都有一个独立的生命周期vue生命周期 跟代码编写的先后顺序没有关系组件销毁两种形式可以被调用 $destroyv-ifvue生命周期钩子函数种 beforeCreate(创建前) 是拿不到data中的数据

eg:可以运行一下查看执行顺序

 <script>Vue.component('child', {data() {return {num: 100}},template: `<div class="child">child组件--{{num}}<button @click="change">修改数据</button>    </div>`,methods: {change() {this.num=900}},beforeCreate() {console.log('子组件创建前') },created() {console.log('子组件创建后')},beforeMount() {console.log('子组件挂载前')},mounted() {console.log('子组件挂载后')},beforeUpdate() {console.log('子组件更新前')},updated() {console.log('子组件更新后')},beforeDestroy() {console.log('子组件销毁前')},destroyed() {console.log('子组件销毁后')}})var app=new Vue({el: "#app",data: {msg: 'hello',show: true},beforeCreate() {console.log('app组件创建前', this.msg) },created() {console.log('app组件创建后', this.msg)},beforeMount() {console.log('app组件挂载前')},mounted() {console.log('app组件挂载后')},beforeUpdate() {console.log('app组件更新前')},updated() {console.log('app组件更新后')},beforeDestroy() {console.log('app组件销毁前',this.msg)},destroyed() {console.log('app组件销毁后',this.msg)}})</script>

vue生命周期使用场景

        1 请求数据(created  mounted)vue中一般使用的axios2 销毁方法函数(定时器)destroyed3 进行组件之间的传值created 

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

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

相关文章

impala使用md5(3条命令搞定)

文章目录 前言1、 找到当前使用的hive版本的hive-exec.jar文件2、上传到HDFS上。改权限3、impala加载function总结 前言 impala没有md5函数。 1、 找到当前使用的hive版本的hive-exec.jar文件 我们用的CDH&#xff0c;所以hive-exec.jar在每台服务器上都准备好的。 我装了loca…

AnimatedVectorDrawable矢量图动画的使用和修改

文章目录 一、前言二、一个矢量图文件三、参考链接 一、前言 矢量可绘制对象可以提供比较复杂的动画效果&#xff0c;只是绘制比较复杂&#xff0c;这里可以让UI使用Adobe After Effects软件制作出相关的矢量图xml文件交由开发使用。只是如果需要重复播放的动画效果时候&#…

解决多线程环境下单例模式同时访问生成多个实例

如何满足单例&#xff1a;1.构造方法是private、static方法、if语句判断 ①、单线程 Single类 //Single类&#xff0c;定义一个GetInstance操作&#xff0c;允许客户访问它的唯一实例。GetInstance是一个静态方法&#xff0c;主要负责创建自己的唯一实例 public class LazySi…

HCIP BGP选路规则总结

选路前提条件 多条BGP路由目标相同&#xff0c;且均可优(下一跳可达、同步关闭)&#xff0c;具有相同的优先级&#xff08;管理距离&#xff09;。 1、优选Preference_Value值最高的路由&#xff08;私有属性&#xff0c;仅本地有效&#xff09;。 不传递 权限最高属性 可…

【IDEA+Spark Streaming 3.4.1+Dstream监控套接字流统计WordCount保存至MySQL8】

【IDEASpark Streaming 3.4.1Dstream监控套接字流统计WordCount保存至MySQL8】 把DStream写入到MySQL数据库中 Spark 3.4.1MySQL 8.0.30sbt 1.9.2 文章目录 【IDEASpark Streaming 3.4.1Dstream监控套接字流统计WordCount保存至MySQL8】前言一、背景说明二、使用步骤1.引入库2…

【数字IC基础】低功耗设计

低功耗技术 功耗构成静态功耗(漏电功耗)动态功耗翻转功耗(Switch Power)短路功耗(Internal Power) 不同类型的标准单元的功耗 低功耗设计方法降低芯片工作电压多阈值工艺方法电源门控&#xff08;Power Gating&#xff09;多电压域(Multi-Voltage Domain)体偏置门控时钟一个简单…

微服务使用步骤

Maven的依赖冲突解决方案&#xff1a; 路径最短原则配置优先原则破坏规则则使用排除 SpringBoot场景启动器starter的开发流程 c3p0-spring-boot-starter自定义场景启动器test-c3p0调用自定义场景启动器SpringBoot自动装配SpringBoot应用启动原理nacos服务治理 安装 启动bin/s…

算法leetcode|66. 加一(rust重拳出击)

文章目录 66. 加一&#xff1a;样例 1&#xff1a;样例 2&#xff1a;样例 3&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 66. 加一&#xff1a; 给定一个由 整数 组成的 非…

IDEA SpringBoot项目引入外部jar并打包

1、首先&#xff0c;我们再pom.xml中导入依赖包时&#xff0c;打包可以正常进行。 但如果我们引入了第三方的外部jar包&#xff08;这里需要先把jar包添加到该项目依赖库中&#xff0c;这里不做演示&#xff09;&#xff0c;如图 2、导致打包时报错&#xff0c;程序包不存在或…

1005 继续(3n+1)猜想

描述 卡拉兹(Callatz)猜想已经在1001中给出了描述。在这个题目里&#xff0c;情况稍微有些复杂。 当我们验证卡拉兹猜想的时候&#xff0c;为了避免重复计算&#xff0c;可以记录下递推过程中遇到的每一个数。例如对 n3 进行验证的时候&#xff0c;我们需要计算 3、5、8、4、…

SpringBoot 配置文件

一、配置文件作用 整个项目中所有重要的数据都是在配置文件中配置的&#xff0c;比如&#xff1a; 数据库的连接信息&#xff08;包含用户名和密码的设置&#xff09;&#xff1b; 项目的启动端口&#xff1b; 第三方系统的调用秘钥等信息&#xff1b; 用于发现和定位问题的…

MBG中update语句的区别

int updateByPrimaryKey(User record) thorws SQLException 按主键更新 int updateByPrimaryKeySelective(User record) thorws SQLException 按主键更新值不为null的字段 使用以上的方式更新数据时必须提供主键&#xff0c;MyBatis根据主键进行数据记录的更新。 int updateBy…

android app控制ros机器人四(调整界面布局)

半吊子改安卓&#xff0c;记录页面布局调整&#xff1a; 在ros-mobile基础上顶端增加一行&#xff0c;用于显示app名称和logo图像&#xff1b;修改标签页。 添加文字简单&#xff0c;但是替换图标长知识了&#xff0c;开始只是简单的把mipmap各个文件夹下的图片进行替换&…

MFC第二十六天 CRgn类简介与开发、封装CMemoryDC类并应用开发

文章目录 CRgn类简介与开发CRgn类简介CRgn类区域管理开发CRgn类区域管理与不规则形状的选取 封装CMemoryDC类并应用开发CMemoryDC.h封装CMemoryDC开发游戏透明动画CFlashDlg.hCFlashDlg.cpp 封装CMemoryDC开发游戏动画 附录四大窗口CDC派生类 CRgn类简介与开发 CRgn类简介 CR…

Qt 6. 其他类调用Ui中的控件

1. 把主类指针this传给其他类&#xff0c;tcpClientSocket new TcpClient(this); //ex2.cpp #include "ex2.h" #include "ui_ex2.h"Ex2::Ex2(QWidget *parent): QDialog(parent), ui(new Ui::Ex2) {ui->setupUi(this);tcpClientSocket new TcpClient…

next_permutation与prev_permutation(全排列函数)

1&#xff0c;next_permutation(a,an);&#xff08;找下一个&#xff09; a代表数组头地址&#xff0c;b代表数组尾地址&#xff0c;如果下一个排列存在则返回真&#xff0c;否者返回假 #include<iostream> #include<algorithm> using namespace std; int main()…

mysql重置和修改密码 Ubuntu系统

忘记密码要重置密码 cat /etc/mysql/debian.cnf/etc/mysql/debian.cnf这个只有Debian或者Ubuntu服务器才有&#xff0c;里面有mysql安装后自带的用户&#xff0c;作用就是重启及运行mysql服务。我们用这个用户登录来达到重置密码的操作 使用上面的那个文件中的用户名和密码登…

【腾讯云Cloud Studio实战训练营】React 快速构建点餐页面

前言&#xff1a; Cloud Studio是一个在线的云集成开发环境&#xff08;IDE&#xff09;&#xff0c;可以让开发人员在浏览器中轻松地开发、测试、调试和部署应用程序。它提供了基于云的计算资源和工具&#xff0c;例如代码编辑器、编译器、调试器、版本控制系统和项目管理工具…

210. 课程表 II Python

文章目录 一、题目描述示例 1示例 2示例 3 二、代码三、解题思路 一、题目描述 现在你总共有 numCourses 门课需要选&#xff0c;记为 0 到 numCourses - 1。给你一个数组 prerequisites &#xff0c;其中 prerequisites[i] [ai, bi] &#xff0c;表示在选修课程 ai 前 必须 …

IDEA超强XSD文件编辑插件-XSD / WSDL Visualizer

前言 XSD / WSDL Visualizer可以简化XML架构定义(XSD)和WSDL文件编辑过程; 通过使用与IntelliJ无缝集成的可视化编辑器&#xff0c;转换处理XSD和WSDL文件的方式。告别导航复杂和难以阅读的代码的挫败感&#xff0c;迎接流线型和直观的体验。 插件安装 在线安装 IntelliJ IDE…