Vue2生命周期、Vue3生命周期及其对比

一、Vue2中的生命周期

Vue2的生命周期分为8个阶段,它们分别是:

  1. beforeCreate(创建前):在实例初始化之后,数据观测和事件配置之前被调用。此时实例还未完成初始化,无法访问到data、computed、watch、methods等属性和方法。

  2. created(创建完成):在实例创建完成后被立即调用。此时,实例已完成了数据观测和属性计算,同时也完成了methods和watch/event事件的配置。

  3. beforeMount(挂载前):在挂载开始之前被调用,此时模板已经编译完成,但尚未渲染成html。

  4. mounted(挂载完成):在实例挂载到页面之后调用。此时真实DOM已经渲染完成,可以进行DOM操作。

  5. beforeUpdate(更新前):在数据更新之前被调用,该方法可用于在更新之前访问现有的DOM,例如手动保存滚动位置。

  6. updated(更新完成):在数据更新之后被调用,该方法还会在组件的子组件更新之后被调用。

  7. beforeDestroy(销毁前):在实例销毁之前调用。此时实例仍然完全可用。

  8. destroyed(销毁完成):在实例销毁之后调用。此时实例所有的指令和事件都已经卸除,所有的子实例都已经被销毁。

在使用时,可以在Vue组件中直接定义这些生命周期方法,它们自动被调用。需要注意的是,生命周期钩子函数的this指向Vue实例。在某些情况下,我们可以利用生命周期函数来实现特定的功能,例如:

  • 在created生命周期中,可以进行一个异步请求数据的操作。
  • 在mounted生命周期中,可以进行DOM的操作。
  • 在beforeDestroy生命周期中,可以清除定时器,解绑事件等操作。

总之,生命周期函数为我们提供了丰富的钩子来定制Vue组件的行为,更好地理解和掌握它们的使用方法是开发高质量Vue应用的关键。

二、Vue3中的生命周期

1、 setup() : 开始创建组件,在beforeCreatecreated 之前执行,创建的是datamethod

**2、**onBeforeMount() : 组件挂在到节点上之前执行的函数;

**3、**onMounted() : 组件挂载完成后执行的函数;

**4、**onBeforeUpdate(): 组件更新之前执行的函数;

**5、**onUpdated(): 组件更新完成之后执行的函数;

**6、**onBeforeUnmount(): 组件卸载之前执行的函数;

**7、**onUnmounted(): 组件卸载完成后执行的函数;

8、 onActivated(): 被包含在**<keep-alive>** 中的组件,会多出两个生命周期钩子函数,被激活时执行;

**9、**onDeactivated(): 比如从 A 组件,切换到 B 组件,A 组件消失时执行;

**10、**onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

三、Vue2.X和Vue3.X对比

javascript 复制代码
    vue2           ------->          vue3
 
beforeCreate(){}   -------->      setup(()=>{})
created(){}        -------->      setup(()=>{})
beforeMount(){}    -------->      onBeforeMount(()=>{})
mounted(){}        -------->      onMounted(()=>{})
beforeUpdate(){}   -------->      onBeforeUpdate(()=>{})
updated(){}        -------->      onUpdated(()=>{})
beforeDestroy(){}  -------->      onBeforeUnmount(()=>{})
destroyed(){}      -------->      onUnmounted(()=>{})
activated(){}      -------->      onActivated(()=>{})
deactivated(){}    -------->      onDeactivated(()=>{})
errorCaptured(){}  -------->      onErrorCaptured(()=>{})

总结: Vue2和Vue3钩子变化不大,beforeCreate 、created 两个钩子被setup()钩子来替代。

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试