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("组件被卸载之后执行")// 清除计时器 timerclearInterval(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 上移除、进入缓存// 以及组件卸载时调用}
}

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

注意事项：

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

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

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

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

相关文章

【Git】生成patch和应用patch

【Git】生成patch和应用patch

生成patch 将本地所有修改打成补丁 git diff > /tmp/xxx.patch将本地对某个文件的修改打成补丁 git diff test/1.txt > /tmp/1.patch将某一次提交的修改内容打成补丁 -1表示只为单个提交创建patch&#xff0c;-o表示输出patch的文件夹路径&#xff0c;默认是用提交的…
阅读更多...
社交媒体数据恢复:企业微信

社交媒体数据恢复:企业微信

企业微信数据恢复概述 企业微信是一款集齐了各大办公工具的办公应用&#xff0c;但在使用过程中&#xff0c;可能会出现数据误删、误操作解散后台等问题。这些问题可能会对企业造成重大损失。为了解决这些问题&#xff0c;企业微信推出了数据保障服务&#xff0c;包括数据备份…
阅读更多...
计算机视觉动作识别——YOWO用于实时时空动作定位与识别的算法解析

计算机视觉动作识别——YOWO用于实时时空动作定位与识别的算法解析

摘要 时空动作定位要求将两种信息源整合到设计的架构中&#xff1a;(1) 来自先前帧的时间信息和(2) 来自关键帧的空间信息。当前的最先进方法通常使用单独的网络提取这些信息&#xff0c;并使用额外的机制进行融合以获得检测结果。YOWO是一个用于视频流中实时时空动作定位的统…
阅读更多...
【Android AMS】startActivity流程分析

【Android AMS】startActivity流程分析

文章目录 AMSActivityStackstartActivity流程startActivityMayWaitstartActivityUncheckedLocked startActivityLocked(ActivityRecord r, boolean newTask, boolean doResume, boolean keepCurTransition)resumeTopActivityLocked 参考 AMS是个用于管理Activity和其它组件运行…
阅读更多...
vue的就地更新与v-for的key属性

vue的就地更新与v-for的key属性

vue的就地更新 Vue中的就地更新到底是怎么回事&#xff0c;为什么会存在就地更新的现象&#xff1f; 注意下面的例子&#xff0c;使用v-for指令时&#xff0c;没有绑定key值&#xff0c;才有就地更新的现象&#xff0c;因为Vue默认按照就地更新的策略来更新v-for渲染的元素列表…
阅读更多...
读《AI营销画布》步骤二 做实验（七）

读《AI营销画布》步骤二 做实验（七）

前言 AI营销画布之打基础在我看来主要是对数据源的准备&#xff0c;那么做实验一是要从众多的数据源中找到精准的可信的数据&#xff1b;二是要识别这些可信数据的价值和可能产生的影响&#xff1b;三是选择AI服务商。 读《AI营销画布》步骤一 打基础&#xff08;六&#xff09…
阅读更多...
bp神经网络拟合函数未知参数【源码+视频教程】

bp神经网络拟合函数未知参数【源码+视频教程】

专栏导读 作者简介&#xff1a;工学博士&#xff0c;高级工程师&#xff0c;专注于工业软件算法研究本文已收录于专栏&#xff1a;《复杂函数拟合案例分享》本专栏旨在提供 1.以案例的形式讲解各类复杂函数拟合的程序实现方法&#xff0c;并提供所有案例完整源码&#xff1b;2.…
阅读更多...
基于springboot实现电影评论网站系统设计项目【项目源码+论文说明】计算机毕业设计

基于springboot实现电影评论网站系统设计项目【项目源码+论文说明】计算机毕业设计

基于springboot实现电影评论网站系统设计演示 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了电影评论网站的开发全过程。通过分析电影评论网站管理的不足&#xff0c;创建了一个计算机管理电影评论网站的方案…
阅读更多...
怎么样在外网登录访问CRM管理系统?

怎么样在外网登录访问CRM管理系统?

一、什么是CRM管理系统&#xff1f; Customer Relationship Management&#xff0c;简称CRM&#xff0c;指客户关系管理&#xff0c;是企业利用信息互联网技术&#xff0c;协调企业、顾客和服务上的交互&#xff0c;提升管理服务。为了企业信息安全以及使用方便&#xff0c;企业…
阅读更多...
轻松查询车辆信息的全能接口

轻松查询车辆信息的全能接口

在当今社会&#xff0c;车辆已经成为人们出行的重要工具之一。当我们在二手车买卖、事故处理或者其他需要查询车辆详细信息的情况下&#xff0c;我们通常需要耗费大量时间和精力去收集相关的资料。幸好&#xff0c;有了车辆信息查询接口&#xff0c;我们可以通过输入车架号vin来…
阅读更多...
HackMyVM-Connection

HackMyVM-Connection

目录 信息收集 arp nmap WEB web信息收集 dirsearch smbclient put shell 提权 系统信息收集 suid gdb提权 信息收集 arp ┌─[rootparrot]─[~/HackMyVM] └──╼ #arp-scan -l Interface: enp0s3, type: EN10MB, MAC: 08:00:27:16:3d:f8, IPv4: 192.168.9.115 S…
阅读更多...
Customizable Ghosts Pack

Customizable Ghosts Pack

“可定制的幽灵包”为游戏开发商快速将幽灵角色融入游戏提供了坚实的基础。鬼角色的标准解决方案。 Customizable Ghost Pack： “可自定义的幽灵包”为游戏开发商快速将幽灵怪物集成到游戏中提供了坚实的基础。鬼角色的标准解决方案。 关键功能 ⭐怪物创造者工具。 ⭐完全…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023