vue3 选项式生命周期API 和 组合式生命周期API 执行先后顺序

<template>
	***** //code=====
</template>
<script>
import { defineComponent, nextTick, onMounted, onBeforeMount, onBeforeUnmount, onUnmounted,onActivated, onDeactivated } from 'vue'

export default defineComponent({
  name: "Checkquality",
  props: {userData: Object, businessList: Array, role: Number},
  beforeCreate(){
    console.log('-----beforeCreate----');
  },
  created(){
    console.log('-----created----');
  },
  beforeMount(){
    console.log('---beforeMount----');
  },
  mounted(){
    console.log('---mounted----');
  },
  beforeDestroy(){
  	//beforeDestroy 该方法已删除,不执行
    console.log('-----beforeDestroy----');
  },
  destroyed(){
  	//beforeDestroy 该方法已删除,不执行
    console.log('-----destroyed-----');
  },
  beforeUnmount(){
    console.log('---beforeUnmount----');
  },
  unmounted(){
    console.log('------unmounted------');
  },
  beforeUpdate(){
    console.log('----beforeUpdate----');
  },
  updated(){
    console.log('----updated----');
  },
  setup(props) {
    

    onBeforeMount(()=>{
      console.log('----onBeforeMount----');
    })
    onBeforeUnmount(()=>{
      console.log('----onBeforeUnmount---');
    })
    onUnmounted(()=>{
      console.log('----onUnmounted-----');
    })
    onActivated(()=>{
      console.log('----onActivated-----')
    })
    onDeactivated(()=>{
      console.log('----onDeactivated----');
    })
    onBeforeUpdate(()=>{
      console.log('----onBeforeUpdate----');
    })
    onUpdated(()=>{
      console.log('----onUpdated----');
    })
    
    console.log('----setup---');


    onMounted(() => {
      console.log('----onMounted---')
    })
    return {
      ***** //code===
    }
  }
})
</script>
<style lang="less">

</style>

执行顺序如下:

----setup---
-----beforeCreate----
-----created----
----onBeforeMount----
---beforeMount----
----onMounted---
---mounted----


//组件更新
----onBeforeUpdate----
----beforeUpdate----
----onUpdated----
----updated----


//组件卸载
----onBeforeUnmount---
---beforeUnmount----
----onUnmounted-----
------unmounted------
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值