【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中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服务器上的字

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,:本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的?二、jenv的核心功能(一)管理多个Java版本(二)支持插件扩展(三)环境隔

Go学习记录之runtime包深入解析

《Go学习记录之runtime包深入解析》Go语言runtime包管理运行时环境,涵盖goroutine调度、内存分配、垃圾回收、类型信息等核心功能,:本文主要介绍Go学习记录之runtime包的... 目录前言:一、runtime包内容学习1、作用:① Goroutine和并发控制:② 垃圾回收:③ 栈和

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

深入解析 Java Future 类及代码示例

《深入解析JavaFuture类及代码示例》JavaFuture是java.util.concurrent包中用于表示异步计算结果的核心接口,下面给大家介绍JavaFuture类及实例代码,感兴... 目录一、Future 类概述二、核心工作机制代码示例执行流程2. 状态机模型3. 核心方法解析行为总结:三

Python中bisect_left 函数实现高效插入与有序列表管理

《Python中bisect_left函数实现高效插入与有序列表管理》Python的bisect_left函数通过二分查找高效定位有序列表插入位置,与bisect_right的区别在于处理重复元素时... 目录一、bisect_left 基本介绍1.1 函数定义1.2 核心功能二、bisect_left 与

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv