[JavaScript知识库]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
Vue3生命周期：onBeforeMount
Vue3生命周期：onMounted

总结

创建实例阶段

• setup：创建实例前执行 （没有this）

渲染阶段

• onBeforeMount：渲染组件DOM之前

• onMounted：渲染组件DOM之后

更新阶段

• onBeforeUpdate：组件更新前

• onUpdated：组件更新后

销毁阶段

• onBeforeUnmount：组件销毁前

• onUnmounted：组件销毁后

Vue2和Vue3生命周期执行顺序

vue2生命周期和vue3生命周期一起使用的时候执行顺序是什么样的呢？
主要代码

const app = Vue.createApp({
  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');
  },


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

  },

  data(){
    return {
      'myName': 'yq'
    }
  },

  template: `111
    `
})

执行顺序

Vue3生命周期：setup
Vue2生命周期：beforeCreate
Vue2生命周期：created
Vue3生命周期：onBeforeMount
Vue2生命周期：beForeMount
Vue3生命周期：onMounted
Vue2生命周期：mounted

总结

创建实例阶段

• 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

Vue2和Vue3父子组件生命周期执行顺序

主要代码

父组件

// 父组件
const app = Vue.createApp({
  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');
  },

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

    return {
    }
  },
  template: `<child  /> `
})

child子组件

app.component('child', {
  template: `<div>child</div>`,
  beforeUnmount(){
    console.log('Vue2生命周期：beforeUnmount');
  },
  unmounted(){
    console.log('Vue2生命周期：unmounted');
  },
  setup(){
    console.log('Vue3生命周期：子组件setup');
    onBeforeMount(() => {
      console.log('Vue3生命周期：子组件onBeforeMount');
    })
    onMounted(() => {
      console.log('Vue3生命周期：子组件onMounted');
    })
    onBeforeUnmount(()=>{
      console.log('Vue3生命周期：onBeforeUnmount');
    })
    onUnmounted(() => {
      console.log('Vue3生命周期：onUnmounted');
    })
  }
})

执行顺序

Vue3生命周期：setup
Vue2生命周期：beforeCreate
Vue2生命周期：created
Vue3生命周期：onBeforeMount
Vue2生命周期：beForeMount
Vue3生命周期：子组件setup
Vue3生命周期：子组件onBeforeMount
Vue3生命周期：子组件onMounted
Vue3生命周期：onMounted
Vue2生命周期：mounted

总结

同一个阶段的生命周期Vue3先执行，后执行vue2生命周期，然后再执行下一个阶段的生命周期。