Vue2和Vue3的生命周期以及执行顺序

前言：

        vue3现在是比较流行的，但是vue2的项目现在很多，而且我们会遇到把一部分vue2的项目移植到我们的vue3项目里面的情况，在这种情况下，如果我们熟悉vue2与vue3的生命周期顺序的话，对我们帮助是很大的。

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');
  })

},

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和Vue3的生命周期一起执行的顺序_web前端小学生的博客-CSDN博客