六、【Vue3】——Vue3生命周期有哪些不同

YIFEI
1,376 阅读2分钟

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

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

一、生命周期流程设计上一些区别

1. Vue3生命周期流程设计优化

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

image.png

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

    • beforeDestroy改名为 beforeUnmount
    • destroyed改名为 unmounted

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

image.png

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形式，那么如果两个同时在一个文件中使用，会有什么反应呢？下面小编带大家一起验证下：

<template>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="sum++">点我+1</button>
</template>
<script>
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---')
    },
}
</script>

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

image.png

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

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

avatar
文章
阅读
粉丝