程序媛美眉都知道的vue2与vue3中生命周期执行顺序的区别干货分享

vue2中执行顺序beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyedvue3中执行顺序setup=>onBeforeMount=>onMounted=>onBeforeUpdate=>onUpdated=>onBeforeUnmount=>onUnmounted对应关系vue2->vue3

beforeCreate->setupcreated->setupbeforeMount->onBeforeMountmounted->onMountedbeforeUpdate->onBeforeUpdateupdated->onUpdatedbeforeDestroy->onBeforeUnmountdestroyed->onUnmounted

其中vue3中的setup相当于vue2中beforeCreate与created但是的执行在beforeCreate与created之前，所以setup无法使用data和methods中的数据和方法,即无法操作this,setup中的this等于undefined,又因为setup中创建的变量与方法最后都要通过return返回出去,所以setup中的程序只能是同步的，而不能是异步,除非return后面只接受一个异步对象，对象返回setup内定义的变量与方法，然后父组件使用Suspense标签包裹异步组件;vue3中如果要使用vue2的beforeDestroy与destroyed需要把名称分别改为beforeUnmount,unmounted如果vue3中同时使用了vue2的写法，vue3的写法会优先执行;

父组件App.vue

import{defineComponent,reactive,ref}from"vue";//引入子组件importchildfrom"./components/child.vue";exportdefaultdefineComponent({name:"App",components:{child,},setup(){constchildShow=ref(true);return{childShow,};},});