likes
comments
collection
share

Vue 生命周期及 keep-alive 使用指南

作者站长头像
站长
· 阅读数 8

Vue 组件生命周期

Vue 组件的生命周期是从创建到销毁的整个过程。在这个过程中，Vue 提供了多个生命周期钩子，允许开发者在组件的不同阶段运行自己的代码。

生命周期钩子概述

Vue 组件的生命周期可以分为四个主要阶段：创建、挂载、更新和销毁。每个阶段都有前后各一个钩子，使开发者能够在适当的时刻介入组件的行为。

创建阶段

  • beforeCreate: 此阶段发生在实例初始化之后，此时组件的数据观测和事件/侦听器的配置尚未初始化。
  • created: 在实例创建完成后被调用。此时已完成数据观测，属性和方法的运算，以及事件/侦听器的配置，但尚未开始 DOM 渲染，也不能访问 $el。

挂载阶段

  • beforeMount: 在挂载开始之前被调用，相关的 render 函数首次被调用。此时可以访问模板和虚拟 DOM，但还没有渲染到真实 DOM 中。
  • mounted: 在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。此时，组件已经创建并插入到 DOM 中，可以进行 DOM 相关的操作。

更新阶段

  • beforeUpdate: 在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子中进一步更改状态，不会触发附加的重渲染过程。
  • updated: 在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时，组件 DOM 已经更新，因此可以执行依赖于 DOM 的操作。

销毁阶段

  • beforeDestroy: 在实例销毁之前调用。实例仍然完全可用，可以在这个钩子中进行清理操作。
  • destroyed: 在实例销毁之后调用。调用此钩子时，Vue 实例指令解除绑定，事件监听器被移除，子实例也被销毁。

Vue 3 中的生命周期变化

Vue 3 引入了组合式 API，相应的生命周期钩子也有所改变，主要使用 setup() 函数代替了部分传统的生命周期钩子：

  • setup: 替代了 beforeCreate 和 created 钩子，是 Vue 3 中组件最先执行的函数。
  • onBeforeMount/onMounted: 替代了 beforeMount 和 mounted 钩子。
  • onBeforeUpdate/onUpdated: 替代了 beforeUpdate 和 updated 钩子。
  • onBeforeUnmount/onUnmounted: 替代了 beforeDestroy 和 destroyed 钩子。

常用的生命周期钩子

在实际开发中，onMounted（挂载完成）、onUpdated（更新完成）、onBeforeUnmount（卸载前）是最常用的几个生命周期钩子。

示例：使用 Vue 3 生命周期钩子

示例：使用 Vue 3 生命周期钩子

下面是一个 Vue 3 组件示例，演示了如何在组件中使用不同的生命周期钩子：

<template>
  <div class="person">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点我 sum+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue';

let sum = ref(0);

function changeSum() {
  sum.value += 1;
}

console.log('setup');

onBeforeMount(() => {
  console.log('挂载之前');
});

onMounted(() => {
  console.log('挂载完毕');
});

onBeforeUpdate(() => {
  console.log('更新之前');
});

onUpdated(() => {
  console.log('更新完毕');
});

onBeforeUnmount(() => {
  console.log('卸载之前');
});

onUnmounted(() => {
  console.log('卸载完毕');
});
</script>

在此代码中，我们使用 ref 来定义响应式数据 sum，并在不同的生命周期钩子中打印出相应的信息。通过 setup 函数，我们可以组织和使用 Vue 3 的组合式 API，包括生命周期钩子。

keep-alive 组件使用指南

keep-alive 是 Vue 提供的一个内置组件，可以用于保留组件状态或避免重新渲染。

keep-alive 的作用

  • 缓存组件：当组件在 <keep-alive> 标签内时，不活跃的组件实例将被缓存，而不是销毁。
  • 提高性能：通过减少组件的重新渲染，可以提高应用的性能。
  • 保存状态：组件的状态在被缓存时保存下来，用户返回时能够保持原来的状态，提高用户体验。

使用 keep-alive

将需要缓存的组件放在 <keep-alive> 标签内。例如，如果你有一个频繁切换但不希望每次都重新渲染的 Tab 组件，可以这样使用：

htmlCopy code
<keep-alive>
  <component :is="currentTabComponent"></component>
</keep-alive>

在这个例子中，currentTabComponent 是一个变量，根据用户的操作改变，对应不同的组件。通过使用 keep-alive，这些组件在切换时不会被销毁和重新创建，从而保持了它们的状态并减少了性能消耗。

keep-alive 钩子

当组件在 <keep-alive> 内被切换时，它们会触发额外的生命周期钩子：

  • activated: 当组件被激活（插入到 DOM 树中）时调用。
  • deactivated: 当组件被停用（从 DOM 树中移除）时调用。

这些额外的生命周期钩子允许开发者在组件被缓存和恢复时执行特定的逻辑。

总结

Vue 组件的生命周期钩子提供了一种强大的方式来执行代码，以对组件的创建、更新和销毁进行微调。理解和正确使用这些钩子，对于开发高效且可维护的 Vue 应用至关重要。同时，通过利用 keep-alive 组件，可以进一步优化应用的性能和用户体验。

转载自:https://juejin.cn/post/7343862045122592820
评论
请登录