vue3 生命周期（生命周期钩子 vs 生命周期选项 vs 缓存实例的生命周期）

vue3 支持两种风格书写：选项式 API 和组合式 API

  • 若采用组合式 API ，则使用生命周期钩子
  • 若采用选项式 API ，则使用生命周期选项
  • 两者选用一种即可，不建议同时使用，避免逻辑紊乱。

在这里插入图片描述

生命周期钩子

在 setup 中使用

onBeforeMount()

组件被挂载之前执行回调

  • 组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。
  • 即将首次执行 DOM 渲染过程。
<script setup>
import { onBeforeMount } from 'vue'

onBeforeMount(() => {
  console.log("组件被挂载之前执行")
})
</script>

注意事项：
在服务器端渲染期间不会被调用

onMounted()

组件挂载完成后执行回调

  • 所有同步子组件都已经被挂载 (不包含异步组件或 树内的组件)。
  • 自身的 DOM 树已经创建完成并插入了父容器中
<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log("组件挂载完成后执行")
})
</script>

使用场景：

  • 执行需要访问组件所渲染的 DOM 树相关的副作用
  • 服务端渲染应用中用于确保 DOM 相关代码仅在客户端执行

注意事项：
在服务器端渲染期间不会被调用

onBeforeUpdate()

组件即将因为响应式状态变更而更新其 DOM 树之前执行回调

<script setup>
import { onBeforeUpdate } from 'vue'

onBeforeUpdate(() => {
  console.log("更新 DOM 树之前执行")
})
</script>

使用场景：
在 Vue 更新 DOM 之前访问 DOM 状态

注意事项：
在服务器端渲染期间不会被调用

onUpdated()

在组件因为响应式状态变更而更新其 DOM 树之后执行回调

  • 子组件中的 onUpdated 回调比父组件中的 onUpdated 回调先执行
  • 多个状态变更会在同一个渲染周期中批量执行 (为了提升性能)。如果需要在某个特定的状态更改后访问更新后的 DOM，需使用 nextTick()
<script setup>
import { onUpdated } from 'vue'

onUpdated(() => {
  console.log("更新 DOM 树之后执行")
})
</script>

注意事项：

  • 在服务器端渲染期间不会被调用
  • 不要在 onUpdated 中更改组件的状态，这可能导致无限的更新循环！

onBeforeUnmount()

组件实例被卸载之前执行回调

  • 此时组件实例依然还保有全部的功能
  • 对应 vue2 中的生命周期 beforeDestroy
<script setup>
import { onBeforeUnmount } from 'vue'

onBeforeUnmount(() => {
  console.log("组件被卸载之前执行")
})
</script>

注意事项：

  • 在服务器端渲染期间不会被调用

onUnmounted()

组件实例被卸载之后执行回调

  • 此时所有子组件都已经被卸载
  • 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。
  • 对应 vue2 中的生命周期 destroyed
<script setup>
import { onUnmounted } from 'vue'

onUnmounted(() => {
  console.log("组件被卸载之后执行")
  // 清除计时器 timer
  clearInterval(timer)
})
</script>

使用场景：
手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。

注意事项：

  • 在服务器端渲染期间不会被调用

onActivated()

若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时执行回调

  • onActivated 在组件挂载时也会调用
  • 缓存的组件实例的生命周期 mounted 被 onActivated 替代
<script setup>
import { onActivated } from 'vue'

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
})
</script>

使用场景：
被缓存的组件实例重新被激活时

注意事项：

  • 在服务器端渲染期间不会被调用

onDeactivated()

若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时执行回调

  • onDeactivated 在组件卸载时也会调用
  • 缓存的组件实例的生命周期 unmounted 被 onDeactivated 替代
<script setup>
import { onDeactivated } from 'vue'

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
})
</script>

使用场景：
被缓存的组件实例变为不活跃状态时

注意事项：

  • 在服务器端渲染期间不会被调用

其他生命周期不常用，可参考官网 了解即可。

生命周期选项

setup() 会在所有生命周期选项之前调用

beforeCreate

组件实例初始化完成之后执行回调

  • 此时 props 已被解析
  • 接着 props 会被定义成响应式属性，data() 和 computed 等选项也开始进行处理。
export default {
  beforeCreate() {
    console.log("组件初始化完成之后执行")
  }
}

created

组件实例处理完所有与状态相关的选项之后执行回调

  • 此时响应式数据、计算属性、方法和侦听器已经设置完成
  • 挂载阶段还未开始，因此 $el 属性仍不可用
export default {
  created() {
    console.log("组件处理完所有与状态相关的选项之后执行")
  }
}

beforeMount

组件被挂载之前执行回调

  • 此时已经完成了其响应式状态的设置，但还没有创建 DOM 节点
  • 即将首次执行 DOM 渲染过程
export default {
  beforeMount() {
    console.log("组件被挂载之前执行")
  }
}

注意事项：

  • 在服务器端渲染时不会被调用

mounted

组件被挂载之后执行回调

  • 所有同步子组件都已经被挂载。(不包含异步组件或 树内的组件)
  • 自身的 DOM 树已经创建完成并插入了父容器中。
export default {
  mounted() {
    console.log("组件被挂载之后执行")
  }
}

使用场景：

  • 执行需要访问组件所渲染的 DOM 树相关的副作用
  • 服务端渲染应用中用于确保 DOM 相关代码仅在客户端执行

注意事项：

  • 在服务器端渲染时不会被调用

beforeUpdate

组件即将因为一个响应式状态变更而更新其 DOM 树之前执行回调

export default {
  beforeUpdate() {
    console.log("组件更新前执行")
  }
}

使用场景：

  • 在 Vue 更新 DOM 之前访问 DOM 状态

注意事项：

  • 在服务器端渲染时不会被调用

updated

组件因为一个响应式状态变更而更新其 DOM 树之后执行回调

  • 子组件中的 updated 回调比父组件中的 updated 回调先执行
  • 不同的状态变更都会触发组件更新，如果需要在某个特定的状态更改后访问更新后的 DOM，需使用 nextTick()
export default {
  updated() {
    console.log("组件更新后执行")
  }
}

使用场景：

  • 在 Vue 更新 DOM 之前访问 DOM 状态

注意事项：

  • 在服务器端渲染时不会被调用
  • 不要在 updated 中更改组件的状态，这可能导致无限的更新循环！

beforeUnmount

组件实例被卸载之前执行回调

  • 此时组件实例依然还保有全部的功能
  • vue2 中的生命周期 beforeDestroy 改名而来
export default {
  beforeUnmount() {
    console.log("组件卸载之前执行")
  }
}

注意事项：

  • 在服务器端渲染时不会被调用

unmounted

组件实例被卸载之后执行回调

  • vue2 中的生命周期 destroyed 改名而来
  • 此时所有子组件都已经被卸载
  • 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。
export default {
  unmounted() {
    console.log("组件卸载之后执行")
  }
}

使用场景：
手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。

注意事项：

  • 在服务器端渲染时不会被调用

activated()

若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时执行回调

  • activated 在组件挂载时也会调用
  • 缓存的组件实例的生命周期 mounted 被 activated替代
export default {
  activated() {
    // 在首次挂载、
    // 以及每次从缓存中被重新插入的时候调用
  }
}

使用场景：
被缓存的组件实例重新被激活时

注意事项：

  • 在服务器端渲染期间不会被调用

deactivated()

若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时执行回调

  • deactivated 在组件卸载时也会调用
  • 缓存的组件实例的生命周期 unmounted 被 deactivated 替代
export default {
  deactivated() {
    // 在从 DOM 上移除、进入缓存
    // 以及组件卸载时调用
  }
}

使用场景：
被缓存的组件实例变为不活跃状态时

注意事项：

  • 在服务器端渲染期间不会被调用

其他生命周期不常用，可参考官网 了解即可。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Vue 阶段练习：记事本

Vue 阶段练习：记事本

将 Vue快速入门 和 Vue 指令的学习成果应用到实际场景中&#xff08;如该练习 记事本&#xff09;&#xff0c;我们能够解决实际问题并提升对 Vue 的技能掌握。 目录 功能展示 需求分析 我的代码 案例代码 知识点总结 功能展示 需求分析 列表渲染删除功能添加功能底部统计…
阅读更多...
3D目标检测实用技巧（二）- 实现点云（or 体素）向图像平面的投影并可视化

3D目标检测实用技巧（二）- 实现点云（or 体素）向图像平面的投影并可视化

一、引言 受Focals Conv的启发&#xff0c;该论文中通过将点云投影到图片中清晰展现出点云学习后的情况&#xff1a; 本次实现的是体素向图像投影并显示&#xff0c;实现出来的效果如下&#xff1a; 二、 实现细节 1、体素投影到图像坐标系 这里我们参考的是VirConv的投影函…
阅读更多...
通过matlab分别对比PSO,反向学习PSO,多策略改进反向学习PSO三种优化算法

通过matlab分别对比PSO,反向学习PSO,多策略改进反向学习PSO三种优化算法

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 粒子群优化算法 (PSO) 4.2 反向学习粒子群优化算法 (OPSO) 4.3 多策略改进反向学习粒子群优化算法 (MSO-PSO) 5.完整程序 1.程序功能描述 分别对比PSO,反向学习PSO,多策略改进反向学…
阅读更多...
百货商场用户画像描绘与价值分析

百货商场用户画像描绘与价值分析

目录 内容概述数据说明实现目标技术点主要内容导入模块1.项目背景1.1 项目背景与挖掘目标 2.数据探索与预处理2.1 结合业务对数据进行探索并进行预处理2.2 将会员信息表和销售流水表关联与合并 3 统计分析3.1 分析会员的年龄构成、男女比例等基本信息3.2 分析会员的总订单占比&…
阅读更多...
Python 入门指南（四）

Python 入门指南（四）

原文&#xff1a;zh.annas-archive.org/md5/97bc15629f1b51a0671040c56db61b92 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第十章&#xff1a;哈希和符号表 我们之前看过列表&#xff0c;其中项目按顺序存储并通过索引号访问。索引号对计算机来说很有效。它们是整…
阅读更多...
使用 Docker 部署 SurveyKing 调查问卷系统

使用 Docker 部署 SurveyKing 调查问卷系统

1&#xff09;SurveyKing 介绍 SurveyKing 是一款功能强大、操作简便的开源问卷系统。它不仅满足了用户对问卷调查的基本需求&#xff0c;还提供了丰富的逻辑设置和灵活的问题设置&#xff0c;使得问卷制作更加智能化和个性化。此外&#xff0c;SurveyKing 还具有快速部署和安全…
阅读更多...
笔记本电脑上的聊天机器人: 在英特尔 Meteor Lake 上运行 Phi-2

笔记本电脑上的聊天机器人: 在英特尔 Meteor Lake 上运行 Phi-2

对应于其强大的能力&#xff0c;大语言模型 (LLM) 需要强大的算力支撑&#xff0c;而个人计算机上很难满足这一需求。因此&#xff0c;我们别无选择&#xff0c;只能将它们部署至由本地或云端托管的性能强大的定制 AI 服务器上。 为何需要将 LLM 推理本地化 如果我们可以在典配…
阅读更多...
elmentui树形表格使用Sortable拖拽展开行时拖拽bug

elmentui树形表格使用Sortable拖拽展开行时拖拽bug

1、使用elemntui的el-table使用Sortable进行拖拽&#xff0c;如下 const el this.$el.querySelector(.el-table__body-wrapper tbody) Sortable.create(el, {onEnd: (event) > {const { oldIndex, newIndex } event//拿到更新前后的下标即可完成数据的更新} })2、但是我这…
阅读更多...
docker 环境变量设置实现方式

docker 环境变量设置实现方式

1、前言 docker在当前运用的越来广泛&#xff0c;很多应用或者很多中间软件都有很多docker镜像资源&#xff0c;运行docker run 启动镜像资源即可应用。但是很多应用或者中间件有很多配置参数。这些参数在运用过程怎么设置给docker 容器呢&#xff1f;下面介绍几种方式 2 、do…
阅读更多...
Day91：API攻防-接口安全SOAPOpenAPIRESTful分类特征导入项目联动检测

Day91：API攻防-接口安全SOAPOpenAPIRESTful分类特征导入项目联动检测

目录 API分类特征-SOAP&OpenAPI&RESTful API分类特征 API常见漏洞 API检测流程 API检测项目-Postman&APIKit&XRAY 工具自动化-SOAP - WSDL Postman 联动burpxray APIKit插件(可联动xray) 工具自动化-OpenApi - Swagger Postman 联动burpxray APIKit…
阅读更多...
HarmonyOS开发实例：【分布式邮件】

HarmonyOS开发实例：【分布式邮件】

概述 基于TS扩展的声明式开发范式编程语言编写的一个分布式邮件系统&#xff0c;可以由一台设备拉起另一台设备&#xff0c;每次改动邮件内容&#xff0c;都会同步更新两台设备的信息。效果图如下&#xff1a; 搭建OpenHarmony开发环境 完成本篇Codelab我们首先要完成开发环境…
阅读更多...
OpenStack：开源云计算的崛起与发展

OpenStack：开源云计算的崛起与发展

目录 一&#xff0c;引言 二&#xff0c;OpenStack的起源 三&#xff0c;OpenStack的版本演进 四&#xff0c;OpenStack跟虚拟化的区别 五&#xff0c;OpenStack组件介绍 1&#xff09;Horizon介绍 2&#xff09;KeyStone介绍 Keystone 功能概览 Keystone 架构详解 3&a…
阅读更多...
RabbitMQ 各种通信模式的Python实现

RabbitMQ 各种通信模式的Python实现

一、RabbitMQ 原理 1、基本原理 RabbitMQ是流行的开源消息队列系统&#xff0c;用erlang语言开发。RabbitMQ是AMQP&#xff08;高级消息队列协议&#xff09;的标准实现。支持多种客户端&#xff0c;如&#xff1a;Python、Java、Javascript、C#、C/C,Go等&#xff0c;支持AJ…
阅读更多...
RabbitMQ Stream插件使用详解

RabbitMQ Stream插件使用详解

2.4版为RabbitMQ流插件引入了对RabbitMQStream插件Java客户端的初始支持。 RabbitStreamTemplateStreamListener容器 将spring rabbit流依赖项添加到项目中&#xff1a; <dependency><groupId>org.springframework.amqp</groupId><artifactId>sprin…
阅读更多...
【echarts】使用 ECharts 绘制3D饼图

【echarts】使用 ECharts 绘制3D饼图

使用 ECharts 绘制3D饼图 在数据可视化中&#xff0c;饼图是表达数据占比信息的常见方式。ECharts 作为一个强大的数据可视化库&#xff0c;除了标准的二维饼图&#xff0c;也支持更加生动的三维饼图绘制。本文将指导你如何使用 ECharts 来创建一个3D饼图&#xff0c;提升你的…
阅读更多...
百度智能云万源全新一代智能计算操作系统发布：引领AI新纪元，开启智能未来

百度智能云万源全新一代智能计算操作系统发布：引领AI新纪元，开启智能未来

随着科技的迅猛发展&#xff0c;人工智能&#xff08;AI&#xff09;逐渐渗透到我们生活的每个角落&#xff0c;为人类社会带来前所未有的变革。在这场科技革命的浪潮中&#xff0c;百度作为中国AI领域的领军企业&#xff0c;始终站在技术创新的前沿&#xff0c;不断引领行业发…
阅读更多...
【数据结构与算法】用两个栈实现一个队列

【数据结构与算法】用两个栈实现一个队列

题目 用两个栈&#xff0c;实现一个队列功能 add delete length 队列 用数组可以实现队列&#xff0c;数组和队列的区别是&#xff1a;队列是逻辑结构是一个抽象模型&#xff0c;简单地可以用数组、链表实现&#xff0c;所以数组和链表是一个物理结构&#xff0c;队列是一个逻…
阅读更多...
Rust腐蚀服务器修改背景和logo图片操作方法

Rust腐蚀服务器修改背景和logo图片操作方法

Rust腐蚀服务器修改背景和logo图片操作方法 大家好我是艾西一个做服务器租用的网络架构师。在我们自己搭建的rust服务器游戏设定以及玩法都是完全按照自己的想法设定的&#xff0c;如果你是一个社区服那么对于进游戏的主页以及Logo肯定会有自己的想法。这个东西可以理解为做一…
阅读更多...
MaxCompute 近实时增全量处理一体化新架构和使用场景介绍

MaxCompute 近实时增全量处理一体化新架构和使用场景介绍

随着当前数据处理业务场景日趋复杂&#xff0c;对于大数据处理平台基础架构的能力要求也越来越高&#xff0c;既要求数据湖的大存储能力&#xff0c;也要求具备海量数据高效批处理能力&#xff0c;同时还可能对延时敏感的近实时链路有强需求&#xff0c;本文主要介基于 MaxComp…
阅读更多...
Docker安装xxl-job分布式任务调度平台

Docker安装xxl-job分布式任务调度平台

文章目录 Docker安装xxl-job分布式任务调度平台1.xxl-job介绍2. 初始化“调度数据库”3、docker挂载运行xxl-job容器3.1、在linux的opt目录下创建xxl_job文件夹&#xff0c;并在里面创建logs文件夹和application.properties文件3.2、配置application.properties文件&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023