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()钩子来替代。

相关推荐
醉の虾7 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧15 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm25 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
chusheng184029 分钟前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
asleep70137 分钟前
第8章利用CSS制作导航菜单
前端·css
hummhumm41 分钟前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
游走于计算机中摆烂的43 分钟前
启动前后端分离项目笔记
java·vue.js·笔记
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒1 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
码蜂窝编程官方2 小时前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游