【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

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory

深入探索协同过滤:从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤(UserCF)2. 基于物品的协同过滤(ItemCF)3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代,推荐系统成为连接用户与内容的桥梁。本文聚焦于

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动,这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升:减少抖动,提高图像的清晰度和细节表现力,使得监控画面更加真实可信。 - 细节增强:在低光条件下,抖

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca