Introduction About lifecycle hooks
Posted By : Nimisha Srivastava | 31-Oct-2022
Introduction-----
Life-cycle hooks are pre-defined methods and they get executed in a certain order, starting with the initialization of the Vue instance to its destruction.
Types of lifecycle hooks in vue js -----
1.. beforeCreate 2.. created 3.. beforeMount 4.. mounted 5.. beforeUpdate 6.. updated 7.. beforeDestroy 8.. destroyed
first we have discussed about beforeCreate lifecycle----
beforeCreate---
beforeCreate is the first lifecycle hook that gets called in Vue.js and it is called right after a new Vue instance is initialized. In this scenario computed properties, watchers, events, data properties, etc. are not setup in this beforeCreate.
<script>
export default {
beforeCreate() {
console.log('beforeCreate hook called');
}
}
</script>
2.. created---
created is the next lifecycle hook that gets called after the beforeCreate hooks.
In this scenario computed properties, watchers, events, data properties, etc. are activated in the created lifecycle.
<script>
export default {
data() {
return {
msg: "Hello World",
}
}
created() {
console.log('created hook called', this.msg);
}
}
</script>
3. beforeMount----
beforeMount is the next lifecycle hook that calls after created hook and right before in the vue instance mounted in the DOM.
<script>
export default{
beforeMount(){
console.log('beforeMount hook called');
}
}
</script>
4.. mounted---
mounted is the next lifecycle hoo that calls after beforeMount and right after vue instance has been mounted. In this scenario app component or any other component is functional and ready to use.
<script>
export default {
mounted() {
alert('mounted has been called');
}
}
</script>
5. beforeUpdate----
beforeUpdate is the next lifecycle hook called after the mounted hook and beforeUpdate is called any time to change made the data that is required in the DOM to be updated.
<template>
<p>
{{ msg }}
</p>
</template>
export default {
data() {
return {
msg: "Hello World",
}
},
beforeUpdate(){
console.log('beforeUpdate hook called');
},
mounted(){
this.?data.hello= 'This is Shubham Kshatriya!';
}
}
</script>
6. updated----
update is the next lifecycle hook, and it is called after beforeUpdate hook and just after a DOM update has occurred.
<template>
<p>
{{ msg }}
</p>
</template>
<script>
export default {
data() {
return {
msg: "Hello World",
}
},
beforeUpdate(){
console.log('beforeUpdate hook called');
},
updated(){
console.log('updated hook called');
},
mounted(){
this.?data.hello= 'This is Shubham Kshatriya!';
}
}
</script>
7. beforeDestroy---
beforeDestrroy is the second last lifecycle hook it instance and all the methods are still functional and it resource management here.
<script>
export default {
data() {
return {
msg: "Hello World!",
}
},
beforeDestroy() {
console.log('beforeDestroy hook called');
this.msg = null
delete this.msg;
}
}
</script>
8. destroyed---
destroyed is the last stage lifecycle hook, where the entire Vue instance gets destroyed. Event listeners, mixins, and all directives get unbounded here.
<script>
export default {
destroyed() {
this.?destroy()
console.log('destroyed hook called')
}
}
</script>
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Nimisha Srivastava
. She has decent knowledge of Frontend technologies like html, css, javascript, vue js, react js and angularr js . she is hardworking and appreciate music