Vue3生命周期及当Vue3与Vue2生命周期混用时的执行顺序

Vue3生命周期

vue3支持2套生命周期，一般Vue3里我们的axios发送请求，事件监听，setInterval等等都写在onMounted生命周期里。

<template>
<div>
 <ul>
   <li v-for="data in obj.list" :key="data"></li>
 </ul>
</div>
</template>
<script>
import { onUnmounted,onMounted } from 'vue'
setup(){
   const obj = reactive({
     list:[ ]
   })
   onMounted ( ( )=>{
      console.log("onMounted ")
      //假设我们2秒后请求拿到了数据，并将其赋值回显
      setTimeout(()=>{
          obj.list = ['aa','bb','cc'] 
      },2000)
   }
   return { obj }
 )
}
</script>

左边vue2生命周期，右边vue3生命周期如下图：

vue3生命周期的执行顺序：
setup：创建实例前执行 （没有this）
onBeforeMount：渲染组件DOM之前
onMounted：渲染组件DOM之后
onBeforeUpdate：组件更新前
onUpdated：组件更新后
onBeforeUnmount：组件销毁前
onUnmounted：组件销毁后

vue2+vue3的生命周期一起使用时的执行顺序

const app = Vue.createApp({
    //vue2
  beforeCreate(){
    console.log('Vue2生命周期：beforeCreate');
  },
  created(){
    console.log('Vue2生命周期：created');
  },
  beforeMount(){
    console.log('Vue2生命周期：beForeMount');
  },
  mounted(){
    console.log('Vue2生命周期：mounted');
  },
  beforeUpdate(){
    console.log('Vue2生命周期：beforeUpdate');
  },
  updated(){
    console.log('Vue2生命周期：updated');
  },
  beforeDestory(){
    console.log('Vue2生命周期：beforeDeftory');
  },
  destoryed(){
    onsole.log('Vue2生命周期：destoryed');
  },
 
  //vue3
  setup(){
    console.log('Vue3生命周期：setup');
 
    // 渲染
    onBeforeMount(()=>{
      console.log('Vue3生命周期：onBeforeMount');
    })
    onMounted(() => {
      console.log('Vue3生命周期：onMounted');
    })
    // 更新
    onBeforeUpdate(()=>{
      console.log('Vue3生命周期：onBeforeUpdate');
    })
    onUpdated(()=>{
      console.log('Vue3生命周期：onUpdated');
    })
    // 卸载
    onBeforeUnmount(() => {
      console.log('Vue3生命周期：onBeforeUnmount');
    })
    onUnmounted(() => {
      console.log('Vue3生命周期：onUnmounted');
    })
 
  },
 
    //界面展示，可有可无
  template: `111
    `
})

最终顺序：

Vue3生命周期：setup
Vue2生命周期：beforeCreate
Vue2生命周期：created
Vue3生命周期：onBeforeMount
Vue2生命周期：beForeMount
Vue3生命周期：onMounted
Vue2生命周期：mounted
Vue3生命周期：onBeforeUpdate
Vue2生命周期：beforeUpdate
Vue3生命周期：onUpdated
Vue2生命周期：updated
Vue3生命周期：onBeforeUnmount
Vue2生命周期：beforeUnmount
Vue3生命周期：onUnmounted
Vue2生命周期：unmounted

总结

同一个阶段的生命周期Vue3先执行，后执行vue2生命周期，然后再执行下一个阶段的生命周期。但是尽量别混用为好，vue2项目就都用vue2的生命周期，vue3项目就都用vue3的生命周期。

转载于：Vue3生命周期及当Vue3与Vue2生命周期混用时的执行顺序_vue3在哪个生命周期发送请求_百思不得小李的博客-CSDN博客