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

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>