Vue3生命周期钩子

•  Vue2和Vue3的生命周期对比

选项式API下的生命周期钩子	组合式API下的生命周期钩子
beforeCreate	不需要，直接写到setup函数中
created	不需要，直接写到setup函数中
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroyed	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated

• 示例 

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'
 
export default {
  setup () {
    onBeforeMount (() => {
	  console.log("相当于 vue2.x 中 beforeMount")
    })

    onMounted (() => {
	  console.log("相当于 vue2.x 中 mounted")
    })

    onBeforeUpdate (() => {
	  console.log("相当于 vue2.x 中 beforeUpdate")
    })
    
    onUpdated (() => {
      console.log("相当于 vue2.x 中 updated")
    })
    
    onBeforeUnmount (() => {
	  console.log("相当于 vue2.x 中 beforeDestroy")
    })
    
    onUnmounted (() => {
	  console.log("相当于 vue2.x 中 destroyed")
    })
   
    return {
    }
    
  }
}
</script>

•  生命周期图示