Introduction
Vue 3, the progressive JavaScript framework, offers developers a robust set of tools to build dynamic and reactive web applications. One of the core features of Vue is its lifecycle methods, which allow developers to hook into different stages of a component's lifecycle. These methods are available in both the Options API and the Composition API, providing flexibility in how you structure your code.
In this article, we'll explore the lifecycle methods available in Vue 3, compare their usage in the Options API and Composition API, and provide practical examples to illustrate their application.
Content
Options API vs. Composition API
In Vue 3, you can define lifecycle methods using either the Options API or the Composition API. The Options API is the traditional way of defining component options, while the Composition API offers a more flexible and modular approach, especially useful for complex applications.
Lifecycle Methods
Below is a diagram illustrating the lifecycle stages of a Vue component:
beforeCreate
- Options API: Not needed
- Composition API: Not needed
This hook is called before the component instance is created.
created
- Options API: Not needed
- Composition API: Not needed
This hook is called after the component instance is created.
beforeMount
-
Options API:
beforeMount -
Composition API:
onBeforeMount
This hook is called right before the component is mounted to the DOM.
Example:
<script>
export default {
beforeMount() {
console.log('Component is about to be mounted');
}
}
</script>
<script setup>
import { onBeforeMount } from 'vue';
onBeforeMount(() => {
console.log('Component is about to be mounted');
});
</script>
mounted
-
Options API:
mounted -
Composition API:
onMounted
This hook is called when the component is mounted to the DOM.
Example:
<script>
export default {
mounted() {
console.log('Component has been mounted');
}
}
</script>
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
console.log('Component has been mounted');
});
</script>
beforeUpdate
-
Options API:
beforeUpdate -
Composition API:
onBeforeUpdate
This hook is called before the component updates.
Example:
<script>
export default {
beforeUpdate() {
console.log('Component is about to update');
}
}
</script>
<script setup>
import { onBeforeUpdate } from 'vue';
onBeforeUpdate(() => {
console.log('Component is about to update');
});
</script>
updated
-
Options API:
updated -
Composition API:
onUpdated
This hook is called after the component updates.
Example:
<script>
export default {
updated() {
console.log('Component has been updated');
}
}
</script>
<script setup>
import { onUpdated } from 'vue';
onUpdated(() => {
console.log('Component has been updated');
});
</script>
beforeUnmount
-
Options API:
beforeUnmount -
Composition API:
onBeforeUnmount
This hook is called right before the component is unmounted.
Example:
<script>
export default {
beforeUnmount() {
console.log('Component is about to be unmounted');
}
}
</script>
<script setup>
import { onBeforeUnmount } from 'vue';
onBeforeUnmount(() => {
console.log('Component is about to be unmounted');
});
</script>
unmounted
-
Options API:
unmounted -
Composition API:
onUnmounted
This hook is called after the component is unmounted.
Example:
<script>
export default {
unmounted() {
console.log('Component has been unmounted');
}
}
</script>
<script setup>
import { onUnmounted } from 'vue';
onUnmounted(() => {
console.log('Component has been unmounted');
});
</script>
errorCaptured
-
Options API:
errorCaptured -
Composition API:
onErrorCaptured
This hook is called when an error is captured from a child component.
Example:
<script>
export default {
errorCaptured(err, vm, info) {
console.error('Error captured:', err);
return false;
}
}
</script>
<script setup>
import { onErrorCaptured } from 'vue';
onErrorCaptured((err, instance, info) => {
console.error('Error captured:', err);
return false;
});
</script>
renderTracked
-
Options API:
renderTracked -
Composition API:
onRenderTracked
This hook is called when a reactive dependency is tracked during render.
Example:
<script>
export default {
renderTracked(e) {
console.log('Render tracked:', e);
}
}
</script>
<script setup>
import { onRenderTracked } from 'vue';
onRenderTracked((e) => {
console.log('Render tracked:', e);
});
</script>
renderTriggered
-
Options API:
renderTriggered -
Composition API:
onRenderTriggered
This hook is called when a reactive dependency triggers a render.
Example:
<script>
export default {
renderTriggered(e) {
console.log('Render triggered:', e);
}
}
</script>
<script setup>
import { onRenderTriggered } from 'vue';
onRenderTriggered((e) => {
console.log('Render triggered:', e);
});
</script>
Summary
Understanding and utilizing lifecycle methods in Vue 3 is crucial for managing the different stages of a component's lifecycle. Whether you prefer the Options API or the Composition API, Vue 3 provides a comprehensive set of hooks to help you control your component's behavior effectively. By mastering these lifecycle methods, you can create more efficient and maintainable Vue applications.
Happy coding! 🚀
If you have any questions, feel free to ask me!
If you like my post, support me on: 
Top comments (0)