Vue2 VS Vue3 生命周期

一、生命周期的概念

Vue组件实例在创建时要经历一系列的初始化步骤,在此过程中Vue会在合适的时机,调用特定的函数,从而让开发者有机会在特定阶段运行自己的代码,这些特定的函数统称为:生命周期钩子(也会叫生命周期函数)

二、生命周期的规律

生命周期整体分为四个阶段,分别是:创建、挂载、更新、销毁,每个阶段都有两个钩子,一前一后。

三、Vue2 VS Vue3生命周期

生命周期Vue 2Vue 3备注
创建阶段beforeCreate、createdsetupvue3创建阶段只有setup
挂载阶段beforeMount、mountedonBeforeMountonMounted
更新阶段beforeMount、mountedonBeforeUpdate、onUpdated
销毁/卸载阶段beforeDestroydestroyedonBeforeUnMount、onUnMounted

vue3叫卸载阶段更合适,对应挂载阶段

四、Vue3生命周期使用 

<template><div class="Vue3-demo"><h2>当前求和为:{{ sum }}</h2><button @click="changeSum">sum+1</button></div>
</template><!-- vue3写法 -->
<script lang="ts" setup name="Person">import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'// 数据let sum = ref(0)// 方法function changeSum() {sum.value += 1}console.log('setup')// 生命周期钩子onBeforeMount(() => {console.log('挂载之前')})onMounted(() => {console.log('挂载完毕')})onBeforeUpdate(() => {console.log('更新之前')})onUpdated(() => {console.log('更新完毕')})onBeforeUnmount(() => {console.log('卸载之前')})onUnmounted(() => {console.log('卸载完毕')})
</script>

五、Vue2生命周期使用 

<template><div>{{name}}</div>
</template>
<script>
<!-- vue2写法 -->
export default {data(){return {name:'Vue 2 生命周期'}},methods:{onChangeName(){this.name = "测试生命周期更新"}},beforeCreate(){console.log('创建前');},created(){console.log('创建完毕');},beforeMount(){console.log('挂载前');},mounted(){console.log('挂载完毕');},beforeUpdate(){console.log('更新前');},updated(){console.log('更新完毕');},beforeDestroy(){console.log('销毁前');},destoryed(){console.log('销毁完毕');}
}
</script>

六、生命周期注意点 

  1. 如果存在父子组件,子组件的mounted生命周期比父组件的mounted生命周期先执行
  2. debugger可以使生命周日停止执行,比如在beforeMount生命周期写一个debugger,后续的生命周期将不会执行
  3. 生命周期钩子的书写顺序不影响钩子的执行顺序
  4. 需要避免在更新阶段的两个钩子中进行状态更改,因为这可能会导致无限循环的渲染过程。这是因为状态的更改会再次触发组件的更新过程。
  5. 如果组件中使用了定时器、事件监听或其他订阅,为了避免内存泄漏等问题,记得在beforeDestory钩子里清除掉相关监听、订阅

ps:文中只列举对比了常用的4个阶段,vue 2 的8个,vue3的7个生命周期钩子,vue的全部生命周期不止这几个,例如vue3官方文档的生命周期钩子列举了12个,vue3生命周期钩子

 

有需要进一步学习的可以看官方文档,本文暂不列举对比 

 

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

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

相关文章

【算法】BFS算法解决多源最短路问题(C++)

文章目录 前言那么什么是单源最短路 / 多源最短路呢&#xff1f;如何解决此类题&#xff1f;解法一解法二对于解法二&#xff0c;如何编写代码&#xff1f; 算法题542.01矩阵1020.飞地的数量1765.地图中的最高点1162.地图分析 前言 此前我们对 单源最短路 问题进行的讲解&…

2024年搭建幻兽帕鲁服务器价格多少?如何自建Palworld?

自建幻兽帕鲁服务器租用价格表&#xff0c;2024阿里云推出专属幻兽帕鲁Palworld游戏优惠服务器&#xff0c;配置分为4核16G和4核32G服务器&#xff0c;4核16G配置32.25元/1个月、3M带宽96.75元/1个月、8核32G配置10M带宽90.60元/1个月&#xff0c;8核32G配置3个月271.80元。ECS…

[ESP32 IDF] wifi 的应用

目录 背景知识 wifi的基本连接使用 WiFi篇—— WiFi两种模式文章中二、WiFi 的启动&#xff08;STA 及 AP 模式&#xff09; 输出现象 通过websocket控制LED 实践验证 实验现象 背景知识 WIFI是ESP32非常重要的一个功能&#xff0c;想要使用一下IDF的API实现将ESP32连…

Ubuntu中安装OpenSSL

Ubuntu中安装OpenSSL 参考&#xff1a;linux上安装Openssl步骤详解_linux安装openssl-CSDN博客 下载&#xff1a; https://www.openssl.org/source/openssl-3.0.1.tar.gz 解压&#xff1a; tar -xzvf xxxx.tar.gz 安装&#xff1a; cd openssl-3.0.12 ./config make -j3…

关于如何利用ChatGPT提高编程效率的

自从去年ChatGPT3.5推出以后&#xff0c;这一年时间在编程过程中我也在慢慢熟悉人工智能的使用&#xff0c;目前来看即使是免费的ChatGPT3.5对于编程效率的提升也是有很大帮助的&#xff0c;虽然在使用过程中确实出现了一些问题&#xff0c;本文记录下我的一些心得体会和用法。…

开发工具之GIT协同开发流程和微服务部署实践与总结

GIT协同开发流程和微服务部署的实践&#xff0c;并总结经验和教训。通过合理的GIT协同开发流程和良好的微服务部署策略&#xff0c;团队可以更高效地开发和部署软件。 ## 引言 在当今快节奏的软件开发环境中&#xff0c;采用合适的工具和流程对于实现高效协同开发和可靠部署至…

iOS 包含行间距计算富文本size

在一次开发过程中&#xff0c;发现带有行间距的富文本计算高度&#xff0c;会有不准确的情况&#xff0c;富文本内容明明很长&#xff0c;但是计算出的高度只有不到20像素&#xff0c;导致整个cell的高度计算异常。 需求上是文字固定宽度&#xff0c;最多显示3行&#xff0c;超…

FPGA高端项目:Xilinx Zynq7020系列FPGA多路视频拼接 工程解决方案 提供6套工程源码和技术支持

目录 1、前言版本更新说明给读者的一封信FPGA就业高端项目培训计划免责声明 2、相关方案推荐我已有的FPGA视频拼接叠加融合方案本方案在Xilinx Kintex7 系列FPGA上的应用本方案在Xilinx Artix7 系列FPGA上的应用 3、设计思路框架视频源选择ov5640 i2c配置及采集动态彩条多路视频…

精通Python第13篇—数据之光:Pyecharts旭日图的魔法舞台

文章目录 引言准备工作绘制基本旭日图调整颜色和样式添加交互功能定制标签和标签格式嵌套层级数据高级样式与自定义进阶主题&#xff1a;动态旭日图数据源扩展&#xff1a;外部JSON文件总结 引言 数据可视化在现代编程中扮演着重要的角色&#xff0c;而Pyecharts是Python中一个…

黑群晖使用SynologyDrive同步家庭和公司电脑文件

文章目录 前言一、黑群晖安装SynologyDrive服务二、樱花frp内网穿透2.1、创建一个隧道2.2、在群晖里面下载、安装、开启樱花frp 三、本地电脑安装SynologyDrive 前言 最近看b站学习视频&#xff0c;发现里面老师喜欢文件都是使用坚果云同步到云盘里面&#xff0c;以前我是瞧不…

OpenHarmony—仅允许在表达式中使用typeof运算符

规则&#xff1a;arkts-no-type-query 级别&#xff1a;错误 ArkTS仅支持在表达式中使用typeof运算符&#xff0c;不允许使用typeof作为类型。 TypeScript let n1 42; let s1 foo; console.log(typeof n1); // number console.log(typeof s1); // string let n2: typeof …

Nuget包缓存存放位置迁移

一、背景 默认情况下&#xff0c;NuGet会将项目中使用的包缓存到C盘&#xff0c;随着项目开发积累nuget包越来越多&#xff0c;这会逐渐挤占大量C盘空间&#xff0c;所以我们可以将nuget包缓存位置指定到其他盘中存放。 二、软件环境 win10、vs2022 三、查看当前缓存存放位…

亚信安慧AntDB打造开放创新的数据库生态

在当今信息化快速发展的时代背景下&#xff0c;亚信安慧AntDB作为一种新兴的DBMS&#xff0c;以其核心优势引起了行业内的广泛关注。它基于具有广泛全球影响力和繁荣社区支持的PostgreSQL(PG)内核&#xff0c;继承了PG的开放性与生态活力&#xff0c;同时在性能和稳定性方面进行…

【C++】引用、内联函数、auto关键字等

前言&#xff1a;在前面我们讲解了C入门基础的一些学习例如命名空间、缺省参数、函数重载等。今天我们将进一步的学习&#xff0c;跟着博主的脚步再次往前迈一步吧。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:高质量&#xff23;学习…

10 Java表达式引擎Aviator

文章目录 一、Aviator介绍二、Aviator使用1. pom.xml引入依赖2. 开发代码 三、Aviator语法1. 运算符优先级2. 常量和变量3. 内置函数 一、Aviator介绍 Aviator是一个高性能、轻量级的 java 语言实现的表达式求值引擎, 主要用于各种表达式的动态求值。 Aviator非常小&#xff0…

【极数系列】Flink环境搭建Docker版本(04)

文章目录 引言01 Linux安装Docker1.安装yum-utils软件包2.安装docker3.启动docker4.设置docker自启动5.配置Docker使用systemd作为默认Cgroup驱动6.重启docker 02 docker部署Flink1.18版本1.拉取最新镜像2.检查镜像3.编写dockerFile文件4.执行dockerFile5.检查flink是否启动成功…

万字长文扫盲JUC基础

文章源码地址 文章目录 JUC概述什么是JUC线程和进程的概念进程和线程线程的状态wait和sleep并发和并行管程monitor用户线程与守护线程 Lock接口复习Synchronizedsyschronized卖票案例多线程编程步骤 什么是Lock接口Lock接口的介绍Lock实现可重入锁实现卖票案例 线程间通信案例…

PyTorch的nn.Module类的详细介绍

在PyTorch中&#xff0c;nn.Module 类是构建神经网络模型的基础类&#xff0c;所有自定义的层、模块或整个神经网络架构都需要继承自这个类。nn.Module 类提供了一系列属性和方法用于管理网络的结构和训练过程中的计算。 1. PyTorch中nn.Module基类的定义 在PyTorch中&#xf…

【洛谷 P1481】魔族密码 题解(字符串+字典树)

魔族密码 题目背景 风之子刚走进他的考场&#xff0c;就…… 花花&#xff1a;当当当当~~偶是魅力女皇——花花&#xff01;&#xff01;^^&#xff08;华丽出场&#xff0c;礼炮&#xff0c;鲜花&#xff09; 风之子&#xff1a;我呕……&#xff08;杀死人的眼神&#xf…

go语言基础strconv类型转换

strconv包实现了基本数据类型与其字符串表示的转换&#xff0c;主要有以下常用函数&#xff1a; Atoi()、Itoa()、parse系列、format系列、append系列。 string与int类型转换 这一组函数是我们平时编程中用的最多的。 Atoi() Atoi()函数用于将字符串类型的整数转换为int类型…