Vue’s lifecycle hooks give you a way to run custom logic at different stages of a component’s life. It’s a lot like those milestones in life—being born, going to school, getting a job, etc. Each stage presents a unique opportunity to do something meaningful.
Here’s a quick rundown:
beforeCreate
This is like the pre-birth phase. Vue has been initialized, but stuff like data and events haven’t been set up yet. Useful if you want to perform some generic setup that doesn’t depend on Vue features.
created ⭐️
Alright, Vue instance is created! Data is initialized, but the template isn’t mounted to the DOM yet. This is a good time to make AJAX calls or perform initial setup that needs reactive data.
beforeMount
We’re right at the doorstep of adding our component to the DOM. The template is compiled into render functions, but it’s not been added to the DOM yet. Honestly, most of the time you won’t need to use this one.
mounted ⭐️
Boom! Your component is now part of the DOM. If you need to interact with the DOM, like using a jQuery plugin or something, this is where you should do it.
beforeUpdate
The component is about to update. Changes are made, and the diff is calculated, but the DOM hasn’t been updated yet. If you need to get the existing DOM state before the component updates, now’s your chance.
updated ⭐️
The component and the DOM are now updated. Any data changes have propagated. Be careful not to trigger infinite loops here by updating state that causes another update.
beforeDestroy
The end is near. Your component is about to be destroyed. This is the time to clean up—remove any timers, cancel API calls, or tear down any manual event listeners you’ve added.
destroyed
It’s over. The component is gone from the DOM and all parent-child relationships are torn down. If you’ve set up any custom event listeners or other code, this is where you’d want to finalize that cleanup.
activated and deactivated (used in keep-alive)
These are special and only get called within a <keep-alive> wrapper. activated runs when a component is being reused, and deactivated runs when it’s being toggled off but kept alive in memory.
An Example of the updated hook being used:
(check your console to see when updated is triggered)
<!DOCTYPE html>
<html>
<head>
<title>Vue App</title>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<div class="">
Count {{count}}
</div>
<button class="vue-btn" @click="increment">Increment</button>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment() {
this.count++
}
},
updated() {
console.log('this.count', this.count)
}
})
</script>
</body>
</html>Understanding these hooks can give you a lot of control over what your components do and when. You’ll find that as you get more advanced in Vue (or web dev in general), knowing the right time to do something can make all the difference.
