vue2和vue3生命周期

目录

一、Vue 2 生命周期钩子详解：

二、Vue 3 生命周期钩子详解：

三、Vue 2 与 Vue 3 生命周期钩子的区别总结：

主要变化总结：

---

一、Vue 2 生命周期钩子详解：

首先列出 Vue 2 的生命周期钩子，并讲解每个钩子的作用：

1. beforeCreate：

   • 作用：Vue 实例被创建之后，数据观测和事件/侦听器配置之前。
   • 使用场景：常用于需要在 Vue 实例的初始化过程中执行的操作，如设置一些初始配置。

2. created：

   • 作用：实例创建完成后，数据观测和事件/侦听器配置完成。
   • 使用场景：可以在这里访问组件的 data、computed、methods，比如请求数据。

3. beforeMount：

   • 作用：模板编译完成，挂载到 DOM 前。
   • 使用场景：通常在这里做一些和 DOM 相关的准备工作。

4. mounted：

   • 作用：挂载到 DOM 后。
   • 使用场景：可以在这里进行如 DOM 操作、调用第三方库等需要访问 DOM 的操作。

5. beforeUpdate：

   • 作用：数据更新后，视图重新渲染前。
   • 使用场景：用于在视图更新之前执行一些操作，比如保存当前状态。

6. updated：

   • 作用：视图更新后。
   • 使用场景：用于在视图渲染更新后执行操作，如记录日志。

7. beforeDestroy：

   • 作用：实例销毁前。
   • 使用场景：清理资源、解绑事件监听器等。

8. destroyed：

   • 作用：实例销毁后。
   • 使用场景：用于执行一些清理操作，比如销毁定时器等。

二、Vue 3 生命周期钩子详解：

接下来，详细解释 Vue 3 的生命周期钩子，特别是与 Vue 2 的区别，重点放在 Composition API 上。

1. setup()：

   • 作用：Vue 3 中代替了 beforeCreate 和 created，用于在组件实例创建之前执行初始化操作。
   • 使用场景：在这里可以定义响应式数据、计算属性、方法等。

2. onBeforeMount：

   • 作用：组件挂载前。
   • 使用场景：与 Vue 2 中的 beforeMount 类似，通常用于在组件挂载前做一些准备工作。

3. onMounted：

   • 作用：组件挂载后。
   • 使用场景：与 Vue 2 中的 mounted 类似，通常用于访问 DOM 元素或进行第三方库的初始化。

4. onBeforeUpdate：

   • 作用：数据更新后，视图重新渲染前。
   • 使用场景：与 Vue 2 中的 beforeUpdate 相似，用于在视图更新之前做一些操作。

5. onUpdated：

   • 作用：视图更新后。
   • 使用场景：与 Vue 2 中的 updated 类似，用于在视图更新后执行一些操作。

6. onBeforeUnmount：

   • 作用：组件销毁前。
   • 使用场景：与 Vue 2 中的 beforeDestroy 类似，用于执行资源清理操作，如移除事件监听器。

7. onUnmounted：

   • 作用：组件销毁后。
   • 使用场景：与 Vue 2 中的 destroyed 类似，用于执行清理操作，如销毁定时器或清除全局状态。

三、Vue 2 与 Vue 3 生命周期钩子的区别总结：

生命周期钩子	Vue 2	Vue 3
创建	beforeCreate	onBeforeMount
	created	onMounted
更新	beforeUpdate	onBeforeUpdate
	updated	onUpdated
销毁	beforeDestroy	onBeforeUnmount
	destroyed	onUnmounted

主要变化总结：

• setup() 代替了 Vue 2 中的 beforeCreate 和 created，它是一个 Composition API 的一部分，可以直接在这里初始化数据、计算属性和方法。

• Vue 3 使用了函数形式的生命周期钩子，如 onMounted、onUpdated，与 Vue 2 中的对象形式生命周期钩子有所不同。

• Vue 2 的 beforeDestroy 和 destroyed 被 Vue 3 的 onBeforeUnmount 和 onUnmounted 替代，命名更为一致且符合生命周期结束时的状态。