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

avatar
作者
筋斗云
阅读量:1
<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------ 

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!