Lifecycle Methods in Vue 3

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: