VUe2.0 和 Vue3.0 的生命週期作對比

beforeCreate -> 請使用 setup()
created -> 請使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

我們發現vue3.0的生命週期執行發生在vue2.0生命週期的前面哈~
setUp這個生命週期發生在beforeCreate和created之前的哈。
兩種形式的生命週期函式是可以共存，它們都會被執行。
 

<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>