在Vue3中畅享生命周期钩子的魅力

Vue3生命周期钩子概览

Vue3与Vue2的生命周期钩子（hooks）非常相似——我们仍可以在相同的场景下使用相同（或类似）的钩子。 如果项目使用Options API方式构建，那就无须修改任何生命周期相关的代码。这是因为Vue3在设计时已对先前版本做了兼容处理。 然而，如果使用Composition API，则需要对生命周期钩子进行一些调整。

Composition API下的生命周期钩子

Composition API是Vue3中的一种全新编程方式，它允许你以更加声明式的方式编写Vue组件。在Composition API中，生命周期钩子被改造成一个名为setup()的函数。

const App = {
  setup() {
    // 在此使用生命周期钩子
  }
}

常用生命周期钩子

created()

created()钩子在组件实例化后立即调用。此时，组件的DOM元素尚未创建。这是一个执行初始化任务的好地方，比如：

• 从服务器获取数据
• 设置组件的状态
• 监听事件

mounted()

mounted()钩子在组件的DOM元素被添加到父元素后立即调用。此时，组件的DOM元素已经存在。这是一个执行与DOM相关的任务的好地方，比如：

• 操纵DOM元素
• 绑定事件监听器
• 设置CSS样式

updated()

updated()钩子在组件的DOM元素更新后立即调用。此时，组件的状态已经改变。这是一个执行与组件状态相关任务的好地方，比如：

• 更新组件的UI
• 触发自定义事件
• 执行副作用

beforeUnmount()

beforeUnmount()钩子在组件的DOM元素从父元素中移除之前立即调用。这是一个执行清理任务的好地方，比如：

• 移除事件监听器
• 注销计时器
• 清理组件的状态

beforeDestroy()

beforeDestroy()钩子在组件实例被销毁之前立即调用。此时，组件的DOM元素已经从父元素中移除。这是一个执行最终清理任务的好地方，比如：

• 释放资源
• 销毁组件的子组件
• 清空组件的状态

watch()

watch()钩子可以让你监听组件状态的变化。当被监听的状态发生变化时，watch()钩子就会被触发。这是一个执行与组件状态相关任务的好地方，比如：

• 更新组件的UI
• 触发自定义事件
• 执行副作用

activated()

activated()钩子在组件被激活时调用。这是一个执行与组件激活相关任务的好地方，比如：

• 从服务器获取数据
• 设置组件的状态
• 监听事件

deactivated()

deactivated()钩子在组件被停用时调用。这是一个执行与组件停用相关任务的好地方，比如：

• 清理组件的状态
• 移除事件监听器
• 注销计时器

总结

Vue3的生命周期钩子是构建动态和响应式Vue应用的重要工具。通过理解和使用这些钩子，你可以创建更加强大和高效的Vue应用。