Vue3：生命周期（与Vue2生命周期对比）

vue2生命周期      vue3生命周期

beforeCreate       beforeCreate
created            created   
beforeMount        beforeMount
mounted            mounted
beforeUpdate       beforeUpdate
updated            updated
beforeDestroy      beforeUnmount（改了）
destroyed          unmounted（改了）


Vue3.0也提供了Composition(组合式)API形式的生命周期钩子，与Vue2.x中钩子对应关系如下:
beforeCreate   --->  setup()
created        --->  setup()
beforeMount    --->  onBeforeMount()
mounted        --->  onMounted()
beforeUpdate   --->  onBeforeUpdate()
updated        --->  onUpdated()
beforeUnmount  --->  onBeforeUnmount()
unmounted      --->  onUnmounted()



具体案例代码如下：
<template>
  <div>{{ sum }}</div>
  <button @click="sum++">sum按钮</button>
</template>

<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

export default {
  name: 'DemoComponent',
  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>