Vue.js has several lifecycle hooks. What is your understanding of life

1.	Vue.js has several lifecycle hooks. What is your understanding of lifecycle hooks as used in vue.js?
Answer» Vue instances undergo a lot of process from the moment they are initialized to the point where they are wrecked and exterminated. Lifecycle in vue is the compilation of activities right from data set up and observation to compiling the template, to mounting of the methods in the Direct Object Method (DOM), to bringing up-to-date the DOM as a result of data change. While those activities are taking place inside the DOM, some functions are naturally performed in them. Those functions are what are called lifecycle hooks. The diagrammatic representation below illustrates the various processes of the vue lifecycle. Vue has eight major lifecycle hooks. They are; created, before created, mounted, before mounted, updated, before updated, destroyed and before destroyed. All these lifecycle hooks play a VITAL ROLE in vue.js framework. Before creation is the first lifecycle that gets called immediately an instance is initialized. It is visualized as shown below: <template>, <div> < h1 >Vue Lifecycle hooks</h1> <ul> <li v-for="(item, n) in LIST" :key="n"> {{ item }} <a @click="deleteItem(item)">Delete</a> </li> </ul> <strong >Add a new item in the list array and save while running localhost to preview the destroy hooks</strong> </div> </template> <script> export default { data() { return { list: [ 'Apex Legends', 'A Plague Tale: Innocence', 'ART SQOOL', 'Baba Is You', 'Devil May Cry 5', 'The Division 2', 'Hypnospace Outlaw', 'Katana ZERO', ], } }, methods: { deleteItem(VALUE) { this.list = this.list.filter(item => item !== value) }, }, beforeCreate() { alert('beforeCreate: data is static, thats it') }, created() { alert('created: data and events ready, but no DOM') }, beforeMount() { alert('beforeMount: $el not ready') }, mounted() { alert('mounted: DOM ready to use') }, beforeUpdate() { alert( 'beforeUpdate: we know an update is about to happen, and have the data' ) }, updated() { alert('updated: virtual DOM will update after you click OK') }, beforeDestroy() { alert('beforeDestroy: about to blow up this component') }, destroyed() { alert('destroyed: this component has been destroyed') }, } </script> <style lang="scss" scoped> ul { padding-left: 0; } li { display: block; list-style: none; + li { margin-top: 10px; } } a { display: inline-block; BACKGROUND: rgb(235, 50, 50); padding: 5px 10px; border-radius: 10px; font-size: 10px; color: white; text-transform: uppercase; text-decoration: none; } </style> The lifecycle hooks are called in a sequence beginning with the “before” then followed by the original. An example of a running program is as below new Vue({ data: { b: 1 }, created: function () { // ‘this’ points to the vm instance console.log( ba is: ’ + this.b) } }) // => “b is: 1”

Vue.js has several lifecycle hooks. What is your understanding of lifecycle hooks as used in vue.js?

Answer»

Vue instances undergo a lot of process from the moment they are initialized to the point where they are wrecked and exterminated. Lifecycle in vue is the compilation of activities right from data set up and observation to compiling the template, to mounting of the methods in the Direct Object Method (DOM), to bringing up-to-date the DOM as a result of data change. While those activities are taking place inside the DOM, some functions are naturally performed in them. Those functions are what are called lifecycle hooks.

The diagrammatic representation below illustrates the various processes of the vue lifecycle.

Vue has eight major lifecycle hooks. They are; created, before created, mounted, before mounted, updated, before updated, destroyed and before destroyed. All these lifecycle hooks play a VITAL ROLE in vue.js framework. Before creation is the first lifecycle that gets called immediately an instance is initialized. It is visualized as shown below:

<template>, <div> < h1 >Vue Lifecycle hooks</h1> <ul> <li v-for="(item, n) in LIST" :key="n"> {{ item }} <a @click="deleteItem(item)">Delete</a> </li> </ul> <strong >Add a new item in the list array and save while running localhost to preview the destroy hooks</strong> </div> </template> <script> export default { data() { return { list: [ 'Apex Legends', 'A Plague Tale: Innocence', 'ART SQOOL', 'Baba Is You', 'Devil May Cry 5', 'The Division 2', 'Hypnospace Outlaw', 'Katana ZERO', ], } }, methods: { deleteItem(VALUE) { this.list = this.list.filter(item => item !== value) }, }, beforeCreate() { alert('beforeCreate: data is static, thats it') }, created() { alert('created: data and events ready, but no DOM') }, beforeMount() { alert('beforeMount: $el not ready') }, mounted() { alert('mounted: DOM ready to use') }, beforeUpdate() { alert( 'beforeUpdate: we know an update is about to happen, and have the data' ) }, updated() { alert('updated: virtual DOM will update after you click OK') }, beforeDestroy() { alert('beforeDestroy: about to blow up this component') }, destroyed() { alert('destroyed: this component has been destroyed') }, } </script> <style lang="scss" scoped> ul { padding-left: 0; } li { display: block; list-style: none; + li { margin-top: 10px; } } a { display: inline-block; BACKGROUND: rgb(235, 50, 50); padding: 5px 10px; border-radius: 10px; font-size: 10px; color: white; text-transform: uppercase; text-decoration: none; } </style> The lifecycle hooks are called in a sequence beginning with the “before” then followed by the original. An example of a running program is as below new Vue({ data: { b: 1 }, created: function () { // ‘this’ points to the vm instance console.log( ba is: ’ + this.b) } }) // => “b is: 1”

Vue.js has several lifecycle hooks. What is your understanding of lifecycle hooks as used in vue.js?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment