【Vue】探究 Vue 2 与 Vue 3 生命周期:变化与延续

news/2024/4/19 14:28:02/文章来源:https://blog.csdn.net/null18/article/details/136458957

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临,让我们一起踏上这个知识之旅!
请添加图片描述

文章目录

  • 🍀什么是生命周期?
  • 🍀Vue2的生命周期
  • 🍀Vue3的生命周期
  • 🍀 Vue 2 与 Vue 3 生命周期的变化
  • 🍀 结论

🍀什么是生命周期?

生命周期指的是事物从诞生到消亡所经历的各个阶段或过程。在软件开发中,特别是在前端开发中,生命周期通常指的是一个软件组件(比如网页、应用程序)从创建到销毁的整个过程。在这个过程中,组件会经历不同的阶段,每个阶段都有自己的特点和功能

如果问它有啥用的话,那么就是它可以帮助开发者更好地理解和控制软件的行为,例如在特定阶段执行特定的操作,或者释放资源以防止内存泄漏,本节我们将简单介绍一下Vue2,3当中的生命周期,以及它们的相同不同之处


🍀Vue2的生命周期

前几节我们都是使用Vue3进行实操,但是我们还没有创建过Vue2的项目,这里我们创建一个Vue2的项目
我们再来回顾一下

vue create vue2_test

接下来我们选择vue2
在这里插入图片描述

接下来我们就暂且等待创建成功吧
在这里插入图片描述

创建完成后,我们将根组件也就是App.vue中的内容进行清理一下,同时创建一个Person.vue作为子组件,同时在子组件里面写上我们的初识代码

<template></template><script>export default {name: 'Person',
}
</script>

相比于Vue3,Vue2的运行命令如下

npm run serve

别忘了根组件的书写

<template><Person/>
</template><script>
import Person from './components/Person.vue'
export default {name: 'App',components:{Person}
}
</script>

接下来我们上正题
在 Vue 2 中,组件的生命周期包括了创建、挂载、更新和销毁四个阶段。下面是 Vue 2 的生命周期钩子函数列表:

  • beforeCreate: 在实例初始化之后,数据观测 (data observer) 和事件配置 (event watchers) 之前被调用。
  • created: 实例已经创建完成后被调用,此时组件的数据绑定、计算属性、方法、事件等都已初始化。
beforeCreate(){console.log('创建前')
},
created(){console.log('创建完毕')
}
  • beforeMount: 在挂载开始之前被调用,相关的渲染函数首次被调用。
  • mounted: 实例挂载完成后被调用,此时 DOM 元素已经插入文档中。
beforeMount(){console.log('挂载前')
},
mounted(){console.log('挂载完毕')
}
  • beforeUpdate: 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
  • updated: 组件更新完成后被调用,此时 DOM 已经更新。
beforeUpdate(){console.log('更新前')
},
updated(){console.log('更新完毕')
}
  • beforeDestroy: 实例销毁之前调用。在这一步,实例仍然完全可用。
  • destroyed: 实例销毁后调用,此时 Vue 实例的所有指令、事件监听器被移除,所有子实例也被销毁。
beforeDestroy(){console.log('销毁前')
},
destroyed(){console.log('销毁完毕')
}

🍀Vue3的生命周期

在 Vue 3 中,与 Vue 2 类似,依然保留了创建、挂载、更新和销毁四个阶段,但在细节上有所调整和优化。Vue 3 为了提高性能,对一些生命周期钩子进行了拆分和合并。

下面是 Vue 3 的生命周期钩子函数列表:

  • setup:创建
  • onBeforeMount: 在挂载开始之前被调用,相关的渲染函数首次被调用。
  • onMounted: 实例挂载完成后被调用,此时 DOM 元素已经插入文档中。
  • onBeforeUpdate: 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
  • onUpdated: 组件更新完成后被调用,此时 DOM 已经更新。
  • onBeforeUnmount: 在卸载组件之前调用。
  • onUnmounted: 组件卸载后调用。
	// 创建console.log('创建')// 挂载前onBeforeMount(()=>{// console.log('挂载前')})// 挂载完毕onMounted(()=>{//console.log('挂载完毕')})// 更新前onBeforeUpdate(()=>{// console.log('更新前')})// 更新完毕onUpdated(()=>{// console.log('更新完毕')})// 卸载前onBeforeUnmount(()=>{// console.log('卸载前')})// 卸载完毕onUnmounted(()=>{// console.log('卸载完毕')})

注意:父组件的最后挂载的


🍀 Vue 2 与 Vue 3 生命周期的变化

在 Vue 3 中,生命周期钩子函数的名称发生了变化,从 before 和 mounted 变为 onBefore 和 onMounted。这样的调整使得生命周期钩子的命名更加一致和清晰。此外,Vue 3 还将销毁阶段的钩子函数从 beforeDestroy 和 destroyed 合并为 onBeforeUnmount 和 onUnmounted,简化了生命周期的管理和理解。

另外,Vue 3 通过引入 Composition API,进一步提升了组件的灵活性和复用性。通过 Composition API,开发者可以更加自由地组织组件逻辑,不再受限于固定的生命周期钩子函数,这对于复杂组件的开发尤为重要。

🍀 结论

本文对 Vue 2 和 Vue 3 的生命周期进行了对比与分析,介绍了两者的异同点。Vue 3 在保留 Vue 2 生命周期特性的基础上,做出了一些调整和优化,以提升开发体验和性能。了解和熟悉 Vue 的生命周期对于正确使用和优化 Vue 应用程序至关重要,希望本文能够帮助读者更好地理解和应用 Vue.js。

请添加图片描述

挑战与创造都是很痛苦的,但是很充实。

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

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

相关文章

springboot245科研项目验收管理系统

科研项目验收管理系统 摘 要 使用旧方法对科研项目信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在科研项目信息的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次…

docker学习进阶

一、dockerfile解析 官方文档&#xff1a; Dockerfile reference | Docker Docs 1.1、dockfile是什么&#xff1f; dockerfile是用来构建docker镜像的文本文件&#xff0c;由一条条构建镜像所需的指令和参数构成的脚本。 之前我们介绍过通过具体容器反射构建镜像(docker comm…

SpringBoot+Ajax+redis实现隐藏重要接口地址

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》《项目实战》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 …

【Pytorch】论文复现 Vision Transformer (ViT)

文章目录 0. 进行设置1. 获取数据2. 创建Dataset和DataLoader3. 复现 ViT 论文&#xff1a;概述4. Equation 1: 将数据拆分为 patch 并创建类、位置和 patch 嵌入5. Equation 2: Multi-Head Attention (MSA)6. Equation 3: Multilayer Perceptron (MLP)7. 创建 Transformer 编码…

双链表的实现(数据结构)

链表总体可以分为三大类 一、无头和有头 二、单向和双向 三、循环和不循环 从上面分类得知可以组合成8种不同类型链表&#xff0c;其中单链表最为简单&#xff0c;双联表最为复杂&#xff0c;两种链表都实现后其余链表都不成问题。 我们前期博客已将完成了单向无头不循环链表…

【Python】进阶学习:pandas--read_excel()函数的基本使用

【Python】进阶学习&#xff1a;pandas–read_excel()函数的基本使用 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希…

ABAP 函数模块的异常抛出

函数模块的异常抛出 *&---------------------------------------------------------------------* *& Report Z_TEST_EXCEPTIONS_LHY *&---------------------------------------------------------------------* *& TYPE&#xff1a;Report *& Descriptio…

浅显易懂:WinForms、WPF和Electron的区别和优缺点

在开发桌面应用的时候&#xff0c;WinForms、WPF和Electron是绕不过去的三个技术栈&#xff0c;本文就详细据介绍了三者的区别和优缺点&#xff0c;帮助老铁们做个抉择。 一、winform wpf Electron 三者区别 WinForms、WPF和Electron是三种不同的框架和技术&#xff0c;用于开…

RabbitMQ架构详解

文章目录 概述架构详解核心组件虚拟主机&#xff08;Virtual Host&#xff09;RabbitMQ 有几种广播类型 概述 RabbitMQ是⼀个高可用的消息中间件&#xff0c;支持多种协议和集群扩展。并且支持消息持久化和镜像队列&#xff0c;适用于对消息可靠性较高的场合 官网https://www.…

零难度!台式电脑如何连接蓝牙耳机?简单几步完成

在当今数字化的生活中&#xff0c;蓝牙耳机因其无线便携性和高品质音效&#xff0c;成为了许多人喜爱的音频配件。对于台式电脑用户而言&#xff0c;或许一开始连接蓝牙耳机会让人感到陌生&#xff0c;但实际上&#xff0c;这一过程远比想象中简单。台式电脑如何连接蓝牙耳机&a…

常用css样式大全以及css属性代码大全

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 往期热门专栏回顾 专栏…

Ubuntu中,重命名文件夹下所有带有空格的文件名,将空格替换为其他字符

Ubuntu中&#xff0c;重命名文件夹下所有带有空格的文件名&#xff0c;将空格替换为其他字符 问题 运行网络训练报错&#xff0c;原因是数据集文件名存在空格&#xff0c;导致读取失败 解决方法 在Ubuntu中&#xff0c;您可以使用终端和一些简单的命令来重命名文件夹下所有…

啤酒:精酿啤酒与炖汤的温暖整合

在寒冷的冬夜&#xff0c;没有什么比一碗热腾腾的炖汤更能温暖人心。而当炖汤与Fendi Club啤酒相遇&#xff0c;这种温暖便达到了理想。它们在舌尖上演绎了一场美妙的交响曲&#xff0c;让人感受到无尽的舒适与满足。 Fendi Club啤酒&#xff0c;以其与众不同的麦香和细腻的泡沫…

微信小程序用户隐私保护指引设置

场景&#xff1a;开发小程序时&#xff0c;有时候需要获取用户隐私信息&#xff0c;在提交小程序审核时&#xff0c;需要填写一份隐私保护协议&#xff0c;经常由于填写不规范导致审核不通过&#xff0c;在网上找到了一份模块可供参考 步骤&#xff1a;小程序后台-》设置-》服…

一键清除JavaScript代码中的注释:使用正则表达式实现

这个正则表达式可以有效地匹配 JavaScript 代码中的各种注释&#xff0c;并且跳过了以 http: 或 https: 开头的链接。 /\/\*[\s\S]*?\*\/|\/\/[^\n]*|<!--[\s\S]*?-->|(?<!http:|https:)\/\/[^\n]*/gvscode 实战&#xff0c;ctrlF 调出查找替换工具&#xff0c;点…

在vue3中封装一个文件上传组件

因为在使用场景中可能会用到多个文件上传&#xff0c;如果每个都一个一个写慢慢就堆成ss了&#xff0c; 使用方法直接在父组件中v-model就可以简单使用 话不多说&#xff0c;直接上代码 <template><el-upload v-model:file-list"fileList" class"upl…

Java/JDK下载安装与环境配置安装(win11超详细图文版教程)

一&#xff1a;安装JDK 1.开始安装JDK 从Oracle官网进入&#xff08;Java Archive | Oracle&#xff09;下载安装文件。 然后往下滑&#xff0c;可以看到官方已经讲收费和免费的分开来了。 这边建议下载Java SE 8 (8u201 and earlier)&#xff0c;原因请看这个博主讲述的理由…

2023第二届陇剑杯网络安全大赛 SS Writeup

sevrer save_1 打开流量包文件过滤http流量 从这个/helloworld/greeting开始追踪TCP流 直接百度搜索payload 搜索得到这题flag就是CVE-2022-22965 sevrer save_2 追踪TCP流&#xff0c;在tcp.stream eq 106&#xff0c;发现反弹shell的IP和端口 这题flag为192.168.43.128:2333…

React-子传父

1.概念 说明&#xff1a;React中子组件向父组件传递数据通常涉及回调函数和状态提升等方法。 2.代码实现 2.1绑定事件 说明&#xff1a;父组件绑定自定义事件 <Son onGetSonMsg{getMsg}></Son> 2.2接受事件 说明&#xff1a;子组件接受父组件的自定义事件名称…

JVM—内存模型(JMM)

之前字节面试问到过Java内存模型&#xff0c;回答的是内存结构。重新学习了一下整理出来。 1、前置知识 通信是指线程之间如何交换信息&#xff0c;主要有两种机制&#xff1a;共享内存 和 消息传递&#xff0c;共享内存指的是多个线程共享的数据区&#xff0c;A 线程写&#x…