Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 Style Guide

Vue 3.0 Options lifecycle hooks

Lifecycle hooks in Vue 3.0 provide the opportunity to add your own functionality at various stages of component instances. They allow you to execute custom logic at different points during a component's lifecycle, like before it's created, after it's mounted, before it's updated, etc.

Here are the lifecycle hooks available in Vue 3.0, listed in the order they're called during a component's lifecycle:

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted
errorCaptured
renderTracked
renderTriggered

Let's create a basic example to see some of these hooks in action.

<template>
  <div>
    <button @click="count++">Increase count</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  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');
  },
};
</script>

Here's what these hooks do:

beforeCreate: This is called right before the component instance is created. Data and events have not been initialized at this stage.
created: Called after the instance is created. Data and events have been initialized, but the template is not yet mounted to the DOM.
beforeMount: This hook runs just before the initial render happens, after the template or render function has been compiled, but before replacing the el with compiled template.
mounted: This is called after the instance has been mounted, where el is replaced with newly created vm.$el.
beforeUpdate: Called when the data changes, before the virtual DOM is re-rendered and patched. You can use this hook to access the new state before the DOM updates.
updated: Called after a data change causes the virtual DOM to be re-rendered and patched.
beforeUnmount: Called right before a Vue instance or component is unmounted.
unmounted: Called after a Vue instance or component has been unmounted.

There are other advanced hooks related to error handling and rendering tracking, like errorCaptured, renderTracked, renderTriggered, which are not covered here but could be useful based on your use case.

Remember that it's important to use these hooks responsibly. Avoid putting too much logic in them, and avoid mutating props or creating side effects in beforeCreate and created.

beforeCreate and created lifecycle hooks:
- Description: beforeCreate is called synchronously before the instance is created, and created is called synchronously after the instance is created. At this stage, data observation, computed properties, methods, and watch/event callbacks have not been set up yet.
- Code:
```
export default {
  beforeCreate() {
    console.log('Before create hook');
  },
  created() {
    console.log('Created hook');
  },
};
```
mounted and beforeDestroy lifecycle hooks:
- Description: mounted is called after the Vue instance has been mounted to the DOM, and beforeDestroy is called just before the instance is destroyed.
- Code:
```
export default {
  mounted() {
    console.log('Mounted hook');
  },
  beforeDestroy() {
    console.log('Before destroy hook');
  },
};
```
updated and beforeUpdate lifecycle hooks:
- Description: beforeUpdate is called just before a component is updated, and updated is called after the component's DOM has been updated.
- Code:
```
export default {
  beforeUpdate() {
    console.log('Before update hook');
  },
  updated() {
    console.log('Updated hook');
  },
};
```

errorCaptured and errorHandler lifecycle hooks:

Description: errorCaptured is called when an error is captured in a child component, and errorHandler is a global error handling hook for all components.

Code:

export default {
  errorCaptured(err, vm, info) {
    console.error('Error captured:', err, vm, info);
  },
};
// Global error handler
Vue.config.errorHandler = function (err, vm, info) {
  console.error('Global error handler:', err, vm, info);
};

watching and beforeUnmount lifecycle hooks:
- Description: watching is called when the component is set up to watch a specific property, and beforeUnmount is called just before the instance is unmounted.
- Code:
```
export default {
  watching() {
    console.log('Watching hook');
  },
  beforeUnmount() {
    console.log('Before unmount hook');
  },
};
```
activated and deactivated lifecycle hooks:
- Description: activated and deactivated are called when a keep-alive component is activated and deactivated.
- Code:
```
export default {
  activated() {
    console.log('Activated hook');
  },
  deactivated() {
    console.log('Deactivated hook');
  },
};
```

component lifecycle hooks sequence:

Description: The sequence of component lifecycle hooks is as follows: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed.

Code:

export default {
  beforeCreate() {
    console.log('Before create hook');
  },
  created() {
    console.log('Created hook');
  },
  beforeMount() {
    console.log('Before mount hook');
  },
  mounted() {
    console.log('Mounted hook');
  },
  beforeUpdate() {
    console.log('Before update hook');
  },
  updated() {
    console.log('Updated hook');
  },
  beforeDestroy() {
    console.log('Before destroy hook');
  },
  destroyed() {
    console.log('Destroyed hook');
  },
};

composition API and lifecycle hooks:

Description: With the composition API, the onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, and onUnmounted functions are used for lifecycle hooks.

Code:

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('Before mount hook');
    });

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

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

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

    onBeforeUnmount(() => {
      console.log('Before unmount hook');
    });

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

    // return reactive properties and methods
    return {};
  },
};