Vue3.0生命周期

最新推荐文章于 2024-07-11 15:29:37 发布

糖醋小排顾。

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量75

点赞数 3

分类专栏： Vue学习文章标签：前端 javascript 开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/Guuiabc/article/details/128865643

版权

Vue学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

区别：

<script>
    import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
    export default {
        name: 'Demo',
        
        setup(){
            console.log('---setup---')
            //数据
            let sum = ref(0)
            //通过组合式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 {sum}
        },
        //通过配置项的形式使用生命周期钩子
        //#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---')
        },
        beforeUnmount() {
            console.log('---beforeUnmount---')
        },
        unmounted() {
            console.log('---unmounted---')
        },
        //#endregion
    }
</script>