【vue3|第13期】深入了解Vue3生命周期:管理组件的诞生、成长与消亡

本文主要是介绍【vue3|第13期】深入了解Vue3生命周期:管理组件的诞生、成长与消亡,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

日期:2024年6月22日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉得有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006

说在最前面:本文 vue3 的示例代码,在没有另外声名的情况下,均采用 <script setup> 组合式代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^


文章目录

  • 一、前言
  • 二、组件的生命周期是什么?
  • 三、组件的生命周期各个阶段
    • 1、创建阶段:
    • 2、挂载阶段:
    • 3、更新阶段:
    • 4、卸载阶段:
  • 四、vue2和vue3生命周期的对比
  • 五、如何使用生命周期钩子函数
    • 1、选项式示例
    • 2、组合式示例
  • 六、总结


在这里插入图片描述


一、前言

Vue.js 的世界中,生命周期更像是一段旅程从出生到成长,再到衰老和最终的归宿。在开发应用程序时,组件的生命周期管理是一个非常重要的环节。正确地使用生命周期钩子,可以帮助我们更好地了解组件从创建、运行到卸载的过程,从而实现对组件状态的合理控制。

二、组件的生命周期是什么?

简单来说,生命周期就是一个组件从创建到卸载的整个过程。在这个过程中,Vue3 为我们提供了一系列的钩子函数,让我们可以在不同阶段介入并进行相应的处理

三、组件的生命周期各个阶段

1、创建阶段:

  • setup():这是Vue3新增的生命周期钩子,用于替代Vue2中的 beforeCreatecreated 钩子。在组件被创建之前,setup() 函数会被执行。它是响应式系统的入口,可以在其中声明响应式状态计算属性方法等。

2、挂载阶段:

  • onBeforeMount()组件挂载到 DOM 之前执行。此时,模板已经编译完成,但尚未挂载到实际的 DOM 元素上。
  • onMounted()组件挂载到 DOM 后执行。此时,组件已经渲染到实际的DOM元素上,可以执行DOM操作。

3、更新阶段:

  • onBeforeUpdate()在组件的数据发生变化,但尚未重新渲染 DOM 之前执行。此时,可以访问到更新前的 DOM 元素。
  • onUpdated()组件重新渲染 DOM 后执行。此时,组件已经完成了更新,可以访问到更新后的 DOM 元素

4、卸载阶段:

  • onBeforeUnmount()在组件即将被卸载之前执行。此时,组件仍然完全可用,但即将被销毁。
  • onUnmounted()组件被卸载后执行。此时,组件已经被销毁,所有的事件监听器、子组件等都被移除。

四、vue2和vue3生命周期的对比

网上资料层次不齐,有些vue2和vue3的生命周期混乱一锅炖,所以这里我给大家整理了一份生命周期对比图,希望可以让各位老铁不再为其所困惑。
在这里插入图片描述
Vue 3 的设计确实令人欣赏,其组件的卸载挂载过程体现了设计上的严谨性和美感,这种“前后呼应”的对称美不仅提高了开发效率,也增强了代码的可读性和可维护性。

五、如何使用生命周期钩子函数

在Vue3中,我们可以使用选项API或组合API来访问和使用生命周期钩子函数。在使用选项API时,我们可以直接在组件选项中定义生命周期钩子函数。而在使用组合API时,我们需要从Vue中导入相应的生命周期钩子函数,并在setup()函数中使用它们。

1、选项式示例

<script>  
export default {  beforeMount() {  // 组件挂载前的行为  },  mounted() {  // 组件挂载后的行为  },  beforeUpdate() {  // 组件更新前的行为  },  updated() {  // 组件更新后的行为  },  beforeUnmount() {  // 组件卸载前的行为  },  unmounted() {  // 组件卸载后的行为  },  // 其他选项如 data、methods、computed 等...  
};  
</script>  <style>  
/* 组件样式 */  
</style>

2、组合式示例

  • export default + setup()
<script>
import { onBeforeCreate, onCreated, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';export default {setup() {onBeforeMount(() => {// 组件挂在前的行为});onMounted(() => {// 组件挂在后的行为});onBeforeUpdate(() => {// 组件更新前的行为});onUpdated(() => {// 组件更新后的行为});onBeforeUnmount(() => {// 组件卸载前的行为});onUnmounted(() => {// 组件卸载后的行为});}
};
</script>
  • <script setup>
<script setup>
import { onBeforeCreate, onCreated, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';onBeforeMount(() => {// 组件挂在前的行为
});onMounted(() => {// 组件挂在后的行为
});onBeforeUpdate(() => {// 组件更新前的行为
});onUpdated(() => {// 组件更新后的行为
});onBeforeUnmount(() => {// 组件卸载前的行为
});onUnmounted(() => {// 组件卸载后的行为
});
</script>

六、总结

Vue3生命周期管理 是我们在开发过程中不可或缺的一部分,通过了解生命周期各个阶段的作用,我们可以更好地安排组件的状态管理业务逻辑。同时,注意生命周期钩子的执行顺序并发执行情况,可以避免在实际开发中出现逻辑错误。


参考文章:

  • Vue.js

版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/139878997

这篇关于【vue3|第13期】深入了解Vue3生命周期:管理组件的诞生、成长与消亡的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性,由Chrome125开始提供原生支持需... 目录 css Anchor Positioning:重新定义「锚定定位」的时代来了! 什么是 Anchor Pos

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布局和层叠关

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

一文深入详解Python的secrets模块

《一文深入详解Python的secrets模块》在构建涉及用户身份认证、权限管理、加密通信等系统时,开发者最不能忽视的一个问题就是“安全性”,Python在3.6版本中引入了专门面向安全用途的secr... 目录引言一、背景与动机:为什么需要 secrets 模块?二、secrets 模块的核心功能1. 基

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字