Vue.js Lifecycle Hooks
beforeCreate
The beforeCreate hook is called before the instance is created.
Use this hook for tasks that need to be performed before data and methods are initialized.
<script>
new Vue({
beforeCreate: function() {
// Perform initialization tasks here
},
// ...
});
</script>
created
The created hook is called after the instance has been created.
Access data and methods in this hook, but the template is not yet mounted.
<script>
new Vue({
created: function() {
// Perform setup tasks here
},
// ...
});
</script>
beforeMount
The beforeMount hook is called before the component's template is mounted.
Use this hook for tasks that need to be performed before the component is rendered.
<script>
new Vue({
beforeMount: function() {
// Perform tasks before mounting
},
// ...
});
</script>
mounted
The mounted hook is called after the component's template has been mounted.
Access the DOM, initialize third-party libraries, or start animations in this hook.
<script>
new Vue({
mounted: function() {
// Perform tasks after mounting
},
// ...
});
</script>
beforeUpdate
The beforeUpdate hook is called when the component's data changes, before re-rendering.
Use this hook to perform tasks before the update, like modifying data or computed properties.
<script>
new Vue({
beforeUpdate: function() {
// Perform tasks before update
},
// ...
});
</script>
updated
The updated hook is called after the component's data changes and the re-rendering is complete.
Use this hook for tasks that rely on the updated DOM or component state.
<script>
new Vue({
updated: function() {
// Perform tasks after update
},
// ...
});
</script>
beforeUnmount
The beforeUnmount hook is called before the component is unmounted or removed from the DOM.
Use thishook for cleanup tasks, such as removing event listeners or canceling requests, before the component is unmounted.
<script>
new Vue({
beforeUnmount: function() {
// Perform tasks before unmounting
},
// ...
});
</script>
unmounted
The unmounted hook is called after the component has been unmounted or removed from the DOM.
Use this hook for final cleanup tasks or releasing resources held by the component.
<script>
new Vue({
unmounted: function() {
// Perform tasks after unmounting
},
// ...
});
</script>
Example Usage
Here's an example that demonstrates the usage of lifecycle hooks in a Vue component:
<template>
<div>
<h2>Lifecycle Hooks Example</h2>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, World!'
};
},
beforeCreate() {
console.log('beforeCreate hook');
},
created() {
console.log('created hook');
},
beforeMount() {
console.log('beforeMount hook');
},
mounted() {
console.log('mounted hook');
},
beforeUpdate() {
console.log('beforeUpdate hook');
},
updated() {
console.log('updated hook');
},
beforeUnmount() {
console.log('beforeUnmount hook');
},
unmounted() {
console.log('unmounted hook');
}
};
</script>
Conclusion
The lifecycle hooks in Vue.js provide you with the ability to perform tasks at different stages of a component's lifecycle.
By utilizing these hooks, you can initialize data, access the DOM, handle updates, perform cleanup tasks, and more.
Understanding and effectively using the lifecycle hooks can greatly enhance your control and flexibility in developing Vue.js applications.
