视频内容

Vue3 生命周期

找了一个和视频接近的版本.
来源:
http://www.360doc.com/content/21/0330/19/46368139_969795318.shtml

上图来源官网:
https://cn.vuejs.org/guide/essentials/lifecycle.html
发现和视频的图片变化相对较大。

• Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
  • beforeDestroy改名为 beforeUnmount
  • destroyed改名为 unmounted
• Vue3.0也提供了 Composition API(组合式API) 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
  • beforeCreate===>setup() (可以理解为 相当于)
  • created=======>setup() (可以理解为 相当于)
  • beforeMount ===>onBeforeMount
  • mounted=======>onMounted
  • beforeUpdate===>onBeforeUpdate
  • updated =======>onUpdated
  • beforeUnmount ==>onBeforeUnmount
  • unmounted =====>onUnmounted

源码

App.vue

<template>
    <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>

    <!-- 如果 v-if=false, 会直接卸载掉 Demo -->
    <Demo v-if="isShowDemo"/>
</template>

<script>
    //引入 组合式API : onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted
    import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'

    //明确性优先：建议保留 .vue后缀，让导入意图更清晰
    import Demo from './components/Demo.vue'
    //在 Vue3 项目中，通常需要加 .vue后缀，但可以通过配置实现不加后缀。
    //import Demo from './components/Demo'


    export default {
        name: 'App',

        components:{Demo},

        setup(){
            let isShowDemo = ref(true)

            //通过组合式API的形式去使用生命周期钩子
            onBeforeMount(()=>{
                console.log('---onBeforeMount---')
            })
            onMounted(()=>{
                console.log('---onMounted---')
            })

            onBeforeUpdate(()=>{
                console.log('---onBeforeUpdate---')
            })
            onUpdated(()=>{
                console.log('---onUpdated---')
            })

            onBeforeUnmount(()=>{
                console.log('---onBeforeUnmount---')
            })
            onUnmounted(()=>{
                console.log('---onUnmounted---')
            })

            return {isShowDemo}
        },

        //将下面的 钩子函数, 放到 上面的 setup() 。即：用组合API，在 setup() 里写生命周期钩子。
        //通过 配置项的形式 使用 生命周期钩子
        //#region 
        /*beforeCreate() {
            console.log('---beforeCreate---')
        },
        created() {
            console.log('---created---')
        },
        beforeMount() {
            console.log('---beforeMount---')
        },
        mounted() {
            console.log('---mounted---')
        },
        beforeUpdate(){
            console.log('---beforeUpdate---')
        },
        updated() {
            console.log('---updated---')
        },

        //2025-11-23 奇怪，我 点击 上面的按钮 隐藏时，并没有触发 下面的 卸载 钩子函数，触发的是 上面2个 更新 钩子函数。 说明此时的Vue3 版本在处理 v-if 为 false 由之前的卸载调整为了更新。
        //beforeDestroy() { console.log('---beforeDestroy---') } ∈ Vue2
        //Vue3 改为:
        beforeUnmount() {
            console.log('---beforeUnmount---')
        },
        //destroyed() { console.log('---destroyed---') } ∈ Vue2
        //Vue3 改为:
        unmounted() {
            console.log('---unmounted---')
        },*/
        //#endregion



    }
</script>