Vue3的生命周期

生命周期图

1. 在Vue3中可以继续使用在vue2中的生命周期钩子，但是有两个生命周期钩子被更名

   • beforeDestroy被替换为beforeUnmount
   • destroy被替换为unmounted

2. 同时Vue3中也提供了Composition API形式的生命周期钩子，与Vue2中的生命周期钩子对应关系如下

   • beforeCreate => setup()
   • created => setup()
   • beforeMount => onBeforeMount
   • mounted => onMounted
   • beforeUpdate => onBeforeUpdate
   • updated => onUpdated
   • beforeUnmount => onBeforeUnmount
   • unmounted => onUnmounted

3. 在使用以上Composition API形式的生命周期时，一定要先进行引入

   import {ref, beforeMount, onMounted} from 'vue'
   
   export default {
     name: 'demo',
     setup () {
       beforeMount(() => {
         console.log('onBeforeMount')
       })
       
       onMounted(() => {
         console.log('onMounted')
       })
     }
   }