vue3、vue2 生命周期

父组件
<template>
  <h2>APP</h2>
  <button @click="isShow = !isShow">切换</button>
  <hr>
  <Child v-if="isShow"/>
</template>
  
<script lang="ts">
  
import { defineComponent, ref, reactive } from 'vue'
import Child from './components/child.vue';
export default defineComponent({
  name: 'App',
  components: {
    Child
  },
  setup() {
    const isShow = ref(true)
    return {
      isShow
    }
  }
});
</script>
子组件
<template>
    <h2>子组件msg: {{ msg }}</h2>
    <button @click="update">更新</button>
</template>
    
<script lang="ts">
    
import { defineComponent, ref,onMounted,onUpdated,onUnmounted,  onBeforeMount, onBeforeUpdate,onBeforeUnmount } from 'vue'
    
export default defineComponent({
    name: 'Child',
    setup() {
        const msg = ref('试试')
        function update() {
            msg.value += '=='
        }
        console.log('setup');
        
        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 {
            msg,
            update
        }
    },
    beforeCreate () {
        console.log('2.x中的beforeCreate()')
    },

    created () {
        console.log('2.x中的created')
    },

    beforeMount () {
        console.log('2.x中的beforeMount')
    },

    mounted () {
        console.log('2.x中的mounted')
    },

    beforeUpdate () {
        console.log('2.x中的beforeUpdate')
    },

    updated () {
        console.log('2.x中的updated')
    },

    beforeUnmount () {
        console.log('2.x中的beforeUnmount')
    },

    unmounted () {
        console.log('2.x中的unmounted')
    }
    
});
</script>

在这里插入图片描述

按我的理解吧,vue3的生命周期好像都在vue2的前头。代码运行结果像这么回事

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值