Cycle de vie dans Vue3

Le cycle de vie de Vue2 et Vue3 :

1. Le cycle de vie de Vue2 peut être utilisé normalement dans Vue3 ;
2. La différence entre le cycle de vie de Vue3 et Vue2 réside dans la différence avant et après le déchargement des composants ;
3. L'API combinée de Vue3 fournit également deux hooks, onRenderTracked et onRenderTriggered, qui sont principalement utilisés pour le débogage ;

Comparaison des cycles Vue2 et Vue 3 :

• beforeCreate -> utiliser setup()
• créé -> utiliser setup()
• avantMount -> onBeforeMount
• monté -> surMonté
• avant la mise à jour -> onBeforeUpdate
• mis à jour -> onUpdated
• avantDestroy -> onBeforeUnmount
• détruit -> onDémonté
• erreurCaptured -> onErrorCaptured

export default {
    
    
  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')
  },
  

  setup() {
    
    
    
    const msg = ref('abc')

    const update = () => {
    
    
      msg.value += '--'
    }

    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 {
    
    
      msg,
      update
    }
  }
}