VUe2.0 和 Vue3.0 的生命周期作对比

<template>
  <div>
    生命周期
  </div>
</template>
<script>
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted
} from "vue";
export default {
  name: "App",
  setup() {
    console.log("类似于created")
   //  挂载的生命周期
   onBeforeMount(()=>{
      console.log("Vue3.0类似于beforeMount ");
   })
  onMounted(()=>{
      console.log("Vue3.0类似于mounted ");
  })
  //   跟新阶段的生命周期
  onBeforeUpdate(()=>{
      console.log("Vue3.0类似于beforeUpdate ");
   })
    onUpdated(()=>{
      console.log("Vue3.0类似于 updated  ");
   })
  // 销毁阶段生命周期
  onBeforeUnmount(()=>{
      console.log("Vue3.0类似beforeDestory ");
   })
    onUnmounted(()=>{
      console.log("Vue3.0类似于destoryed ");
   })
  },
  beforeCreate(){
    console.log( 'vue2.0 beforeCreate' )
  },
  created(){
    console.log( 'vue2.0 created' )
  },
  beforeMount(){
    console.log( 'vue2.0 beforeMount' )
  },
  mounted(){
    console.log( 'vue2.0 mounted' )
  },
  beforeUpdate(){
    console.log( 'vue2.0 beforeUpdate' )
  },
  updated(){
    console.log( 'vue2.0 updated' )
  },
  // vue3中你仍然可以去使用vue2的生命周期。
  // 只是需要注意的是:beforeDestroy==>变成了 beforeUnmount
  //                destroyed==> unmounted
  // 我们发现vue3.0的生命周期执行发生在vue2.0生命周期的前面哈~
  // setUp这个生命周期发生在beforeCreate和created之前的哈。
  beforeUnmount() {
    console.log( 'vue2.0 beforeDestroy' )
  },
  //destroyed==> unmounted
  unmounted(){
    console.log( 'vue2.0 destroyed' )
  }
};
</script>