【vue3】组件和vue3的生命周期

String佳佳

已于 2023-10-13 10:39:42 修改

阅读量111

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： javascript vue.js 前端

于 2023-10-13 10:37:53 首次发布

本文链接：https://blog.csdn.net/weixin_44171757/article/details/133805597

vue3 专栏收录该内容

18 篇文章

订阅专栏

文章讲述了在Vue3中，特别是在使用TypeScript的`<scriptsetup>`语法时，组件的生命周期钩子如`onBeforeMount`、`onMounted`等的变化，以及setup如何替代传统的生命周期方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


//Parent.vue

<template>
    <h1>生命周期 </h1>
    <Com/>
</template>
    
<script setup lang='ts'>    
    import Com from '../components/Com.vue'
</script>
    
<style>
    
</style>


//Com.vue

<template>
    <p>我是子组件</p>
</template>
    
<script setup lang='ts'>
    import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'

    /**
     * 在setup语法模式中，没有beforeCreate created这两个生命周期，setup去代替
     */
    console.log('setup')

    //挂载前
    onBeforeMount(()=>{
        //onBeforeMount无法读取到dom元素
    })

    //挂载完成
    onMounted(()=>{

    })

    //更新前
    onBeforeUpdate(()=>{
        //获取更新前的dom

    })
    
    //更新完成
    onUpdated(()=>{
        //获取更新之后的dom
    })

    //卸载前
    onBeforeUnmount(()=>{

    })

    //卸载完成
    onUnmounted(()=>{

    })
</script>
    
<style>
    
</style>