剖析 Vue 3 生命周期：揭秘组件生命週期的秘辛

前端

2024-01-06 20:22:25

探索 Vue 3 组件生命周期的迷人世界

踏入 Vue 3 组件生命周期的奇妙旅程，发现组件从诞生到消逝的奥秘。这趟征程将揭开组件运作背后的机制，为你掌握操控组件的关键赋能。

组件生命周期的乐章

组件的生命周期宛如一部精心编排的交响乐，每个阶段奏响着独特的音符，演奏着组件的成长史诗。

创建：生命的起点

一切始于创建，组件从构想中孕育而出，化为有血有肉的实体，肩负起自己的使命。

安装：登上舞台

安装阶段为组件的首次亮相做准备，赋予其生命，使之能够与世界互动。

载入：闪耀登场

载入阶段，组件闪耀登场，植入应用程序中，成为用户界面的一部分，承担起它的使命。

更新：适应进化

随着数据或属性的变化，组件必须随时调整。更新阶段赋予组件这种适应性，使其保持最新状态。

销毁：谢幕落幕

所有美好的事物终有结束，组件也不例外。销毁阶段标志着组件生命周期的终结，它优雅地退出舞台，腾出空间给新的挑战者。

监听组件的脉搏：生命周期钩子

Vue 框架贴心地为我们提供了生命周期钩子，让我们得以在组件生命周期的不同时刻监视和操纵组件的行为。这些钩子就像控制杆，让我们能够在关键点影响组件的运行。

beforeCreate：黎明前的准备

组件创建之前，此钩子可以帮助我们初始化数据或设置属性。

created：新生儿诞生

组件创建后，此钩子可以帮助我们执行依赖于组件实例的任务。

beforeMount：DOM 的最后调整

组件挂载之前，此钩子可以帮助我们对 DOM 进行最后调整。

mounted：DOM 的交响曲

组件挂载后，此钩子可以帮助我们与 DOM 交互或执行其他需要 DOM 操作的任务。

beforeUpdate：数据的回响

在组件更新之前，此钩子可以帮助我们在数据更新时执行必要的计算或设置。

updated：与 DOM 的共舞

组件更新后，此钩子可以帮助我们响应数据更新并对 DOM 进行相應調整。

beforeDestroy：谢幕前的清理

组件销毁之前，此钩子可以帮助我们执行清理工作或釋放資源。

destroyed：永别了，我的朋友

组件销毁后，此钩子可以帮助我们进行最后的清理並告別组件。

实战演练：点亮生命周期

为了加深对生命周期钩子的理解，让我们深入探究一个实际示例：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 在组件挂载后执行
    onMounted(() => {
      console.log(`组件已挂载，当期计数：${count.value}`)
    })

    return {
      count
    }
  }
}