深入浅出：Vue3 生命周期全面解析

Vue3 生命周期纵览

Vue3 生命周期是理解和掌握 Vue 响应式系统和虚拟 DOM 渲染机制的关键。生命周期钩子函数让我们能够在组件的不同阶段执行特定的逻辑，从而实现复杂的交互和数据操作。

1. Vue2 生命周期回顾

Vue2 的生命周期函数包括：

• beforeCreate：组件实例创建之前调用，此时还没有 DOM 元素。
• created：组件实例创建之后调用，此时还没有 DOM 元素。
• beforeMount：组件实例挂载之前调用，此时 DOM 元素已经创建，但还未插入到文档中。
• mounted：组件实例挂载之后调用，此时 DOM 元素已经插入到文档中。
• beforeUpdate：组件实例更新之前调用，此时新的 props 或 state 已经到来，但 DOM 元素还没有更新。
• updated：组件实例更新之后调用，此时 DOM 元素已经更新。
• beforeDestroy：组件实例销毁之前调用，此时 DOM 元素还未从文档中移除。
• destroyed：组件实例销毁之后调用，此时 DOM 元素已经从文档中移除。

2. Vue3 生命周期新增

Vue3 在 Vue2 的生命周期函数基础上新增了以下钩子函数：

• setup：在组件实例创建之前调用，与 created 钩子类似，但可以在此钩子中访问 props 和 state。
• onBeforeUpdate：在组件实例更新之前调用，与 beforeUpdate 钩子类似，但可以在此钩子中直接访问新的 props 和 state。
• onUpdated：在组件实例更新之后调用，与 updated 钩子类似，但可以在此钩子中直接访问新的 props 和 state。

3. keep-alive 与 destroyed

keep-alive 是 Vue 中的一个组件，可以使组件在切换路由时不被销毁。在 keep-alive 中，组件的 created 和 mounted 钩子函数只会在组件首次创建时调用，而 updated 和 destroyed 钩子函数则会在组件每次更新时调用。

destroyed 钩子函数在组件被销毁时调用，此时组件的 DOM 元素已经从文档中移除。在 destroyed 钩子函数中，我们可以进行一些清理工作，例如移除事件监听器、取消定时器等。

Vue3 生命周期在实践中的应用

1. 组件初始化

在 created 钩子函数中，我们可以初始化组件的属性和状态。例如，我们可以通过 this.$store.dispatch() 方法来分发一个 Vuex action，或者通过 this.$http.get() 方法来发送一个 HTTP 请求。

2. 组件渲染

在 mounted 钩子函数中，组件的 DOM 元素已经插入到文档中。此时我们可以进行一些与 DOM 相关的操作，例如：

• 添加事件监听器：this.$el.addEventListener('click', this.handleClick)
• 操纵 DOM 元素：this.$el.style.color = 'red'

3. 组件更新

在 updated 钩子函数中，组件的 DOM 元素已经更新。此时我们可以进行一些与 DOM 更新相关的操作，例如：

• 更新组件的样式：this.$el.style.color = 'blue'
• 滚动到组件的顶部：this.$el.scrollIntoView()

4. 组件销毁

在 destroyed 钩子函数中，组件的 DOM 元素已经从文档中移除。此时我们可以进行一些清理工作，例如：

• 移除事件监听器：this.$el.removeEventListener('click', this.handleClick)
• 取消定时器：clearTimeout(this.timer)

总结

Vue3 生命周期钩子函数为我们提供了在组件的不同阶段执行特定逻辑的能力，从而使我们能够实现复杂的交互和数据操作。通过熟练掌握 Vue3 生命周期，我们可以轻松构建出功能强大、易于维护的 Vue 应用程序。