vue3 生命周期与vue2的区别

vue3生命周期

• Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：

• • beforeDestroy改名为 beforeUnmount
  • destroyed改名为 unmounted

• Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

• • beforeCreate===>setup()
  • created=======>setup()
  • beforeCreate与created没有对应组合式API，setup()相当于beforeCreate与created，对于配置项setup()的执行时机早于配置项beforeCreate与created。
  • beforeMount ===>onBeforeMount
  • mounted=======>onMounted
  • beforeUpdate===>onBeforeUpdate
  • updated =======>onUpdated
  • beforeUnmount ==>onBeforeUnmount
  • unmounted =====>onUnmounted
  • 如果组合式API的生命周期与配置项形式的生命周期一起写，组合式API的生命周期的执行时机优先于配置项形式的生命周期。
  • 一般情况下统一使用组合式API的生命周期，或者统一使用配置项形式的生命周期

<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我+1</button>
</template>
<script>
  import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
  export default {
    name: 'Demo',
    setup(){
      console.log('---setup---')
      //数据
      let sum = ref(0)
      //通过组合式API的形式去使用生命周期钩子
      onBeforeMount(()=>{
        console.log('---onBeforeMount---')
      })
      onMounted(()=>{
        console.log('---onMounted---')
      })
      onBeforeUpdate(()=>{
        console.log('---onBeforeUpdate---')
      })
      onUpdated(()=>{
        console.log('---onUpdated---')
      })
      onBeforeUnmount(()=>{
        console.log('---onBeforeUnmount---')
      })
      onUnmounted(()=>{
        console.log('---onUnmounted---')
      })
      //返回一个对象（常用）
      return {sum}
    },
      
    //通过配置项的形式使用生命周期钩子
    /*
    beforeCreate() {
      console.log('---beforeCreate---')
    },
    created() {
      console.log('---created---')
    },
    beforeMount() {
      console.log('---beforeMount---')
    },
    mounted() {
      console.log('---mounted---')
    },
    beforeUpdate(){
      console.log('---beforeUpdate---')
    },
    updated() {
      console.log('---updated---')
    },
    beforeUnmount() {
      console.log('---beforeUnmount---')
    },
    unmounted() {
      console.log('---unmounted---')
    },
    */
  }
</script>