Previous Vue2 lifecycle hook functions:

  • BeforeCreate created before

  • Created after creation

  • BeforeMount Before mounting the DOM

  • Mounted After the DOM is mounted

  • BeforeUpdate Before updating a component

  • Updated After components are updated

  • BeforeDestroy destroyed before

  • Destroyed after the destruction of

Now the lifecycle hook function in Vue3 has changed:

  • Setup before creating an instance

  • OnBeforeMount Before mounting the DOM

  • OnMounted After DOM is mounted

  • OnBeforeUpdate Before updating a component

  • OnUpdated After components are updated

  • OnBeforeUnmount Before unmounting and destruction

  • OnUnmounted Unmounted after destruction

Start by mastering the common lifecycle hook functionsonMounted:

 // Import the onMounted hook function as required
import { onMounted } from 'vue'
export default ({
  name: 'App',
  setup () {
    // Vue3 lifecycle function
    onMounted(() = > {
      console.log('hello')})Vue3 the same lifecycle function can fire multiple times
    onMounted(() = > {
      console.log('nihao')})}})Copy the code

Conclusion:

  • 1. The function of Vue3 life cycle has changed

  • 2. Remove two:beforeCreateandcreatedTo addsetup

  • 3. Method names have changed: the method name is preceded by oneon, humped in the middle

  • 4. Uninstall component lifecycle changes:onBeforeUnmount,onUnmounted

  • 5. The same lifecycle can trigger multiple times