VUE3-Lifecycle

VUE3-Lifecycle

life cycle diagram

Hook function writing

• Since setup comes before before Created and created, setup replaces them.
• Destroyed in vue2 is named unmounted, and beforeDestroyed is named beforeUnmount.

Optional API

export default {
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  update() {
    console.log('update');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
}

Composable API

export default {
  // 没有了create的生命周期钩子
  // 由于setup是在before Created和created之前的所以setup代替了他们
  onBeforeMount(() => {
    console.log('onBeforeMount');
  })

  onMounted(() => {
    console.log('onMounted');
  })

  onBeforeUpdate(() => {
    console.log('onBeforeUpdate');
  })

  onUpdated(() => {
    console.log('onUpdated');
  })
  onBeforeUnmount(() => {
    console.log('onBeforeUnmount');
  })

  onUnmounted(() => {
    console.log('onUnmounted');
  })
}

code

<template>
  <div>
    生命周期钩子（Lifecycle Hooks）
  </div>
</template>
<script>
  import {
    onBeforeMount,
    onBeforeUnmount,
    onBeforeUpdate,
    onMounted,
    onUnmounted,
    onUpdated
  } from 'vue';
  export default {
    name: 'lifeCycleHooks',
    setup() {
      console.log('setup...');
      // 没有了create的生命周期钩子
      // 由于setup是在before Created和created之前的所以setup代替了他们
      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 {}
    },

    // 在vue3中，当生命周期钩子函数有两种写法
    // 第一种写法：选项式API
    // 第二种写法：组合式API
    beforeCreate() {
      console.log('beforeCreate');
    },
    created() {
      console.log('created');
    },
    beforeMount() {
      console.log('beforeMount');
    },
    mounted() {
      console.log('mounted');
    },
    beforeUpdate() {
      console.log('beforeUpdate');
    },
    update() {
      console.log('update');
    },
    beforeUnmount() {
      console.log('beforeUnmount');
    },
    unmounted() {
      console.log('unmounted');
    }
  }
</script>

Involving content

Vue3, life cycle hook