六、【Vue3】

2024-01-21 20:27| 来源: 网络整理| 查看: 265

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

Vue3生命周期与Vue2基本相同，都可以通过配置项去使用生命周期钩子，但流程设计上有了一些区别，一些钩子名称发生了变化，并且Vue3可以通过组合式API形式去使用生命组件钩子，下面与小编一起探讨一下吧。

一、生命周期流程设计上一些区别 1. Vue3生命周期流程设计优化

Vue2生命周期图示 Vue3生命周期图示

Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：

beforeDestroy改名为 beforeUnmount destroyed改名为 unmounted

仔细观察两个流程图头部可以看出，Vue3先将el挂载了之后再进行的beforeCreate,而Vue2是created之后进行判断是否挂载el，如果没，则流程终止，beforeCreate和created俩个钩子冗余使用，因此Vue3进行了优化的

2、组合式API形式使用生命周期钩子

Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

beforeCreate===>setup() created=======>setup() beforeMount ===>onBeforeMount mounted=======>onMounted beforeUpdate===>onBeforeUpdate updated =======>onUpdated beforeUnmount ==>onBeforeUnmount unmounted =====>onUnmounted

注意：之前文章中谈setup的两个注意点时说到过setup执行的时机：在beforeCreate之前执行一次。由此可理解为何组合式生命周期钩子中的beforeCreate和created会被setup代替。

3、配置项形式钩子与组合式API形式钩子一起使用

由于Vue3对生命周期钩子的使用提供了两种形式：配置项形式、组合式API形式，那么如果两个同时在一个文件中使用，会有什么反应呢？下面小编带大家一起验证下：

当前求和为：{{sum}} 点我+1 import { onBeforeUpdate, onUpdated, ref} from 'vue' export default { name: 'Demo', setup(){ //数据 let sum = ref(0) console.log('---setup---') // 通过组合式API形式去使用生命周期钩子 onBeforeUpdate(() => { console.log('---onBeforeUpdate---') }) onUpdated(() => { console.log('---onUpdated---') }) return { sum, } }, // 通过配置项形式去使用生命周期钩子 beforeUpdate () { console.log('---beforeUpdate---') }, updated () { console.log('---updated---') }, }

此处只验证更新时变化，其它时候变化同理，请看效果图：

由上图可看到，每点击按钮，页面发生更新时候，带on的钩子总是先执行，看代码可知，组合式API中使用的生命周期钩子比配置项中的优先。

不过一般情况下没有人开发代码会这么两种形式都写，此处只做演示，知道即可。

【本文地址】

公司简介

联系我们