In the second part of our exploration into Vue.js Lifecycle Hooks, we delve into the 'beforeUnmount' and 'unmounted' hooks. These hooks provide crucial opportunities to perform cleanup tasks and interact with components just before or after they are removed from the DOM. This guide introduces these hooks with insightful examples to deepen your understanding of Vue.js lifecycles.
The 'beforeUnmount' Hook
The 'beforeUnmount' lifecycle hook is triggered just before a component is about to be removed from the DOM. It allows developers to execute specific tasks or access component elements before the unmounting process begins. Contrary to expectations, components are still accessible in the DOM at this stage, enabling developers to retrieve information or perform last-minute manipulations.
Example 1. Alerting Before Unmount
Let's consider a scenario where we use the 'beforeUnmount' hook to alert the content of a specific element in the component before it gets removed.
<!-- CompOne.vue -->
<template>
<h2>Component</h2>
<p ref="pEl">Strawberries!</p>
</template>
<script>
export default {
beforeUnmount() {
alert("beforeUnmount: The text inside the p-tag is: " + this.$refs.pEl.innerHTML);
}
}
</script>
In this example, the 'beforeUnmount' hook triggers an alert, displaying the content inside a paragraph element before the component is unmounted.
Example 2. Dynamic Button Text
Let's explore another application of the 'beforeUnmount' hook in the context of a dynamic button text change.
<!-- App.vue -->
<template>
<h1>Lifecycle Hooks</h1>
<button @click="toggleComponent">{{ btnText }}</button>
<div>
<comp-one v-if="activeComp"></comp-one>
</div>
</template>
<script>
export default {
data() {
return {
activeComp: true
}
},
computed: {
btnText() {
return this.activeComp ? 'Remove component' : 'Add component';
}
},
methods: {
toggleComponent() {
this.activeComp = !this.activeComp;
},
},
}
</script>
In this example, the button text dynamically changes based on the component's presence. The 'beforeUnmount' hook plays a crucial role in updating the button text before the component is removed.
The 'unmounted' Hook
The 'unmounted' hook is called after a component has been successfully removed from the DOM. This is a pivotal moment for performing cleanup tasks, such as removing event listeners or clearing intervals. While the component is technically no longer part of the DOM, the 'unmounted' hook provides a final chance to execute necessary actions.
Example 3. Alert on Unmount
Let's utilize the 'unmounted' hook to trigger an alert when a component is successfully unmounted.
<!-- CompOne.vue -->
<template>
<h2>Component</h2>
<p>When this component is removed from the DOM tree, the unmounted() function is called, and we can add code to that function. In this example, we create an alert popup box when this component is removed.</p>
</template>
<script>
export default {
unmounted() {
alert("The component is removed (unmounted)!");
}
}
</script>
In this scenario, the 'unmounted' hook creates an alert notifying developers that the component has been successfully removed.
Example 4. Visualizing Unmounting
Let's create an example where the unmounting of a component is visualized through CSS transitions.
<!-- App.vue -->
<template>
<h1>Lifecycle Hooks</h1>
<button @click="toggleComponent">{{ btnText }}</button>
<div>
<comp-one v-if="activeComp" class="fade-out"></comp-one>
</div>
</template>
<script>
export default {
data() {
return {
activeComp: true
}
},
computed: {
btnText() {
return this.activeComp ? 'Remove component' : 'Add component';
}
},
methods: {
toggleComponent() {
this.activeComp = !this.activeComp;
},
},
}
</script>
<style scoped>
.fade-out {
transition: opacity 1s;
opacity: 0;
}
</style>
In this example, we add a CSS class with a fade-out transition to the component, creating a visual effect when it is unmounted. The 'unmounted' hook ensures that the transition is completed before the component is officially removed.
In this exploration of Vue.js Lifecycle Hooks, we've navigated through the crucial stages of 'beforeUnmount' and 'unmounted,' gaining a deeper understanding of how these hooks empower developers to manage component lifecycles effectively. These hooks serve as gateways for performing tasks just before and after a component bids farewell to the DOM, offering unique opportunities for cleanup and interaction. The examples provided have showcased the versatility of these hooks, from dynamic interactions before unmounting to visually appealing transitions during the unmounting process. By leveraging the power of 'beforeUnmount' and 'unmounted,' developers can ensure graceful transitions, perform necessary cleanup, and enhance the overall user experience in Vue.js applications.
Sharing 3 exercises that are designed to reinforce your understanding. See the attachment.