vue2和vue3生命周期详解及对比

前言

Vue.js 是一个用于构建用户界面的渐进式框架，它提供了响应式和组件化的方式来构建前端应用。Vue 的生命周期指的是 Vue 实例从创建到销毁的整个过程，该过程被分为了几个关键阶段，每个阶段都可以执行特定的操作。下面将分别介绍 Vue 2 和 Vue 3 的生命周期，并进行对比。

Vue 2 生命周期

Vue 2 的生命周期主要包括以下几个阶段：

1. beforeCreate：
   • 在实例初始化之后，数据观测（data observer）和 event/watcher 事件配置之前被调用。
   • 此时 data 和 methods 中的数据还没有初始化。
2. created：
   • 在实例创建完成后被立即调用。
   • 在这一步，实例已完成数据观测、属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
3. beforeMount：
   • 在挂载开始之前被调用。
   • 相关的 render 函数首次被调用（该钩子在服务器端渲染期间不被调用）。
4. mounted：
   • el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
   • 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
5. beforeUpdate：
   • 数据更新时调用，发生在虚拟 DOM 打补丁之前。
   • 这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
6. updated：
   • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用这个钩子。
   • 当这个钩子被调用时，组件 DOM 已经更新，所以现在可以执行依赖于 DOM 的操作。
7. beforeDestroy：
   • 实例销毁之前调用。
   • 在这一步，实例仍然完全可用。
8. destroyed：
   • Vue 实例销毁后调用。
   • 调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

Vue 3 生命周期

Vue 3 的生命周期与 Vue 2 类似，但引入了一些变化，特别是组合式 API（Composition API）的引入，改变了某些钩子的使用方式。Vue 3 的生命周期主要包括：

1. setup()：
   • 作为组合式 API 的入口函数，它在 beforeCreate 和 created 钩子之前执行。
   • 在这里可以初始化组件的响应式状态和逻辑。
2. onBeforeMount：
   • 在挂载之前调用，类似于 Vue 2 的 beforeMount。
3. onMounted：
   • 在挂载之后调用，类似于 Vue 2 的 mounted。
4. onBeforeUpdate：
   • 在更新之前调用，类似于 Vue 2 的 beforeUpdate。
5. onUpdated：
   • 在更新之后调用，类似于 Vue 2 的 updated。
6. onBeforeUnmount：
   • 在卸载之前调用，类似于 Vue 2 的 beforeDestroy。
7. onUnmounted：
   • 在卸载之后调用，类似于 Vue 2 的 destroyed。
8. 其他生命周期钩子：
   • onActivated 和 onDeactivated：用于被 <keep-alive> 缓存的组件。
   • onErrorCaptured：当捕获一个来自子孙组件的错误时被调用。
   • onRenderTracked 和 onRenderTriggered：这两个调试钩子在开发模式下可用，用于跟踪依赖项的渲染和触发。

vue2和vue3比对

生命周期阶段	Vue 2 钩子	Vue 3 钩子
创建前	-	setup()
创建完成	created	setup()
挂载前	beforeMount	onBeforeMount
挂载后	mounted	onMounted
更新前	beforeUpdate	onBeforeUpdate
更新后	updated	onUpdated
销毁前	beforeDestroy	onBeforeUnmount
销毁后	destroyed	onUnmounted

Vue 3 引入了组合式 API，使得逻辑复用和组件组织更加灵活，但它并没有改变 Vue 组件的生命周期阶段。同时，Vue 3 保留了 Vue 2 中的生命周期钩子，以确保向后兼容性。在 Vue 3 中，setup() 函数替代了 Vue 2 中的 beforeCreate 和 created 钩子，成为组合式 API 的入口点。