Vue2 与 Vue3 生命周期详解与对比

生命周期(Life Cycle)是指一个对象或实例从创建、运行到销毁的全过程。在 Vue 中,生命周期就是组件实例从创建、初始化数据、挂载 DOM、渲染更新直至销毁卸载的整个过程。理解生命周期有助于我们在合适的时机执行逻辑,比如数据请求、事件监听、DOM 操作、资源释放等。

一、Vue2 的生命周期

Vue2 中的生命周期钩子分为 8 个主要阶段,以及一些特殊场景下的钩子:

1. 创建阶段

  • beforeCreate:实例初始化之前,数据和事件都还未挂载,常用于插件初始化。
  • created:实例创建完成,此时可以访问数据和方法,但 DOM 还未挂载。常用于异步数据请求。

2. 挂载阶段

  • beforeMount :在挂载开始之前被调用,this.$el 已经存在,但还未替换挂载点。
  • mounted:实例挂载完成,真实 DOM 已经渲染,可进行 DOM 操作。

3. 更新阶段

  • beforeUpdate:数据更新后、DOM 重新渲染前触发,此时数据已变但视图未更新。
  • updated:DOM 更新完成,此时可以操作最新的 DOM。

4. 销毁阶段

  • beforeDestroy:实例销毁之前触发,可以清除定时器、事件监听器等。
  • destroyed:实例销毁后触发,数据绑定和事件监听已全部移除。

5. 特殊钩子

  • activated / deactivated :在 keep-alive 缓存组件激活与停用时触发。
  • errorCaptured:捕获子组件错误时触发。

二、Vue3 的生命周期

Vue3 保留了 Vue2 的大部分生命周期钩子,但命名方式和调用方式有所调整:

1. 创建阶段

  • setup() :Vue3 新增的组合式 API 入口,在组件实例创建前调用,无法访问 this,取而代之的是使用 refreactive 等 API 管理数据。

2. 挂载阶段

  • onBeforeMount :对应 Vue2 的 beforeMount
  • onMounted :对应 Vue2 的 mounted

3. 更新阶段

  • onBeforeUpdate :对应 Vue2 的 beforeUpdate
  • onUpdated :对应 Vue2 的 updated

4. 销毁阶段

  • onBeforeUnmount :对应 Vue2 的 beforeDestroy
  • onUnmounted :对应 Vue2 的 destroyed

5. 特殊钩子

  • onActivated / onDeactivated :对应 Vue2 的 activated / deactivated,用于 keep-alive 场景。
  • onErrorCaptured :对应 Vue2 的 errorCaptured

三、Vue2 与 Vue3 生命周期对比

阶段 Vue2 Vue3(组合式 API)
创建阶段 beforeCreate、created setup(取代部分逻辑)
挂载阶段 beforeMount、mounted onBeforeMount、onMounted
更新阶段 beforeUpdate、updated onBeforeUpdate、onUpdated
销毁阶段 beforeDestroy、destroyed onBeforeUnmount、onUnmounted
特殊钩子 activated、deactivated、errorCaptured onActivated、onDeactivated、onErrorCaptured

关键区别

  • Vue3 用 setup 替代了 Vue2 的 beforeCreatecreated,在 setup 中定义的数据与方法可在整个组件生命周期中使用。
  • Vue3 生命周期钩子统一以 onXxx 命名,更符合组合式 API 的调用习惯。
  • Vue2 的 this 指向组件实例,而 Vue3 的 setup 无法访问 this,需要依靠组合式 API 管理数据与方法。

四、数据请求应该放在哪个阶段?

  • Vue2 :通常放在 created(避免页面闪动)或 mounted(当需要操作 DOM 时)。
  • Vue3 :推荐在 setup 中使用 onMounted 进行数据请求,这样逻辑清晰且易于维护。

示例(Vue3):

javascript 复制代码
import { onMounted, ref } from 'vue'

export default {
  setup() {
    const list = ref([])

    onMounted(async () => {
      const res = await fetch('/api/data')
      list.value = await res.json()
    })

    return { list }
  }
}

五、总结

  • Vue2 和 Vue3 生命周期的核心流程一致,都是 创建 → 挂载 → 更新 → 卸载
  • Vue3 在设计上更符合函数式思维,将生命周期统一封装为组合式 API 的钩子函数。
  • 对比来看,Vue3 的 setup 取代了 Vue2 的初始化阶段,其他生命周期只是更换了命名方式。
  • 对于开发者来说,Vue2 更直观,Vue3 更灵活、可组合,适合复杂应用逻辑的拆分和复用。
相关推荐
web打印社区5 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗5 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长5 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅6 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_6 小时前
Chrome开发者工具
前端·chrome
YiHanXii6 小时前
this 输出题
前端·javascript·1024程序员节
楊无好6 小时前
React中ref
前端·react.js
程琬清君6 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1007 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔667 小时前
flutter实现web端实现效果
前端·flutter