生命周期的妙用——Vue3

突然好热

已于 2024-07-14 14:10:11 修改

阅读量796

点赞数 27

分类专栏：前端碎碎念文章标签： vue.js javascript 前端

于 2024-07-14 11:50:56 首次发布

本文链接：https://blog.csdn.net/m0_46543935/article/details/140414338

版权

前端碎碎念专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue3的生命周期

从Vue2到Vue3👾

)

从Vue2到Vue3👾

Vue 3 保留了大多数 Vue 2 的生命周期钩子，同时引入了组合 API 中的生命周期钩子。以下是 Vue 3 中的生命周期钩子：
在这里插入图片描述

不只onMounted

虽然很多新手开发者主要使用 mounted 钩子，但其他钩子在特定场景下也有其独特的用途。理解和善用这些钩子可以让你编写出更加高效和易于维护的 Vue.js 应用。

beforeCreate -> setup 中的逻辑：实例初始化之后，数据观测和事件配置之前。由于 setup 作为新的初始化阶段，一些原本在 beforeCreate 中的逻辑可以移到 setup 中。
用途：在组件实例初始化之后，数据观测和事件配置之前调用。此时还没有对 data、computed、watchers 等做初始化。
妙用：几乎不使用，因为在这个阶段无法访问组件中的任何属性或方法。可以用于某些高级调试或插件开发场景。

created -> setup 中的逻辑：实例已经创建完成，但未挂载到 DOM 上。大多数 created 中的逻辑可以移到 setup 中。
用途：实例已经创建完成，完成数据观测和事件配置，但还没有挂载到 DOM 上。
妙用：
进行 API 请求，初始化数据。
设置定时器（setInterval、setTimeout）。
访问和修改实例的 data、computed、methods。
订阅事件（event bus）。

beforeMount -> onBeforeMount：在挂载开始之前调用，相关的 render 函数首次被调用。
beforeMount
用途：在挂载开始之前调用，相关的 render 函数首次被调用。
妙用：很少单独使用，因为数据已经绑定但尚未生成 DOM。可以在 render 前做一些准备工作。

mounted -> onMounted：el 被新创建的 vm.$el 替换，并挂载到实例上。
用途：组件被挂载到 DOM 上后调用。
妙用：
操作 DOM 元素（获取元素高度、宽度，初始化第三方库）。
开始动画。
进行数据交互（监听 DOM 事件）

beforeUpdate -> onBeforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
用途：在数据更新后、重新渲染 DOM 之前调用。
妙用：
在数据更新前执行一些操作，例如保存当前状态。
对比新旧数据，做一些预处理。

updated -> onUpdated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
用途：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
妙用：
操作更新后的 DOM。
触发其他组件或外部 API 调用。

activated -> onActivated：keep-alive 组件激活时调用。
用途：keep-alive 组件激活时调用。
妙用：
恢复组件状态。
开始需要在激活状态下执行的任务（例如重启定时器）。

deactivated -> onDeactivated：keep-alive 组件停用时调用。
用途：keep-alive 组件停用时调用。
妙用：
暂停或清理需要在停用状态下停止的任务（例如清除定时器）。

beforeDestroy -> onBeforeUnmount：实例销毁之前调用，实例仍然完全可用。
用途：组件实例销毁之前调用，此时实例仍然完全可用。
妙用：
清除定时器。
取消订阅事件。
清理所有非自动清理的资源。

destroyed -> onUnmounted：实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。
用途：组件实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。
妙用：
完全清理组件相关的所有内容，确保不再保留任何引用。
可以进行一些日志记录或通知操作。

Vue 3 新增的生命周期钩子
onRenderTracked：响应式依赖被追踪时调用，用于调试。
onRenderTriggered：响应式依赖变化导致组件重新渲染时调用，用于调试。

又见keep-alive

keep-alive 是 Vue.js 提供的一个内置组件，用于缓存不活动的组件实例。它通常用于或之类的动态组件上，以避免重复创建和销毁组件，提升性能。

主要属性

keep-alive 组件提供了几个有用的属性：
include：字符串或正则表达式。只有匹配的组件会被缓存。
exclude：字符串或正则表达式。匹配的组件不会被缓存。
max：数字。缓存组件实例的最大数量。

被你包裹

当组件被 keep-alive 包裹时，它会多出两个特有的生命周期钩子 onActivated 和 onDeactivated。

onActivated：当组件从缓存中激活时调用。可以在此钩子中执行一些需要在组件显示时执行的操作。
onDeactivated：当组件被缓存起来时调用。可以在此钩子中执行一些需要在组件隐藏时执行的操作。

应用场景

路由组件缓存：在使用 Vue Router 时，通过 keep-alive 缓存路由组件，可以避免路由切换时组件的销毁和重建，提升性能。

<template>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>

多标签页切换：在实现类似浏览器多标签页切换的功能时，通过 keep-alive 可以缓存已经打开的标签页，避免重复加载和初始化。
表单数据保存：在表单组件切换时，通过 keep-alive 可以保留用户输入的数据，避免重复输入。

值得注意的是🤖

onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用。
这两个钩子不仅适用于 < KeepAlive > 缓存的根组件，也适用于缓存树中的后代组件。
由于 keep-alive 会缓存组件实例，因此组件的状态（如 data 和 computed）在组件被缓存和激活时会保持不变。这在某些场景下可能需要特别处理。
虽然 keep-alive 可以提升性能，但如果缓存的组件数量过多，可能会占用较多的内存资源。因此需要合理设置 max 属性。