Skip to content

Commit e45ec6d

Browse files
sudheerjsudheerj
committed
Add lifecycle interview questions and answers
1 parent 3792499 commit e45ec6d

File tree

2 files changed

+140
-0
lines changed

2 files changed

+140
-0
lines changed

‎README.md

+140
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,146 @@ List of 300 VueJS Interview Questions
4949
4. **Routing:** Navigation between pages is achieved through vue-router
5050
5. **Light weight:** VueJS is light weight library compared to other frameworks
5151
3. ### What are the lifecycle methods of VueJS?
52+
Lifecycle hooks are a window into how the library you’re using works behind-the-scenes. By using these hooks, you will know when your component is created, added to the DOM, updated, or destroyed. Let's look at lifecycle diagram before going to each lifecycle hook in detail,
53+
54+
![ScreenShot](images/vuelifecycle.png)
55+
56+
1. **Creation(Initialization):**
57+
Creation Hooks allow you to perform actions before your component has even been added to the DOM. You need to use these hooks if you need to set things up in your component both during client rendering and server rendering. Unlike other hooks, creation hooks are also run during server-side rendering.
58+
1. beforeCreate:
59+
This hook runs at the very initialization of your component. hook observes data and initialization events in your component. Here, data is still not reactive and events that occur during the component’s lifecycle have not been set up yet.
60+
```javascript
61+
new Vue({
62+
data: {
63+
count: 10
64+
},
65+
created: function () {
66+
console.log('Nothing gets called at this moment')
67+
// `this` points to the view model instance
68+
console.log('count is ' + this.count);
69+
}
70+
})
71+
// count is undefined
72+
```
73+
2. created:
74+
This hook is invoked when Vue has set up events and data observation. Here, events are active and access to reactive data is enabled though templates have not yet been mounted or rendered.
75+
```javascript
76+
new Vue({
77+
data: {
78+
count: 10
79+
},
80+
created: function () {
81+
// `this` points to the view model instance
82+
console.log('count is: ' + this.count)
83+
}
84+
})
85+
// count is: 10
86+
```
87+
**Note:** Remember that, You will not have access to the DOM or the target mounting element (this.$el) inside of creation hooks
88+
2. **Mounting(DOM Insertion):**
89+
Mounting hooks are often the most-used hooks and they allow you to access your component immediately before and after the first render.
90+
1. beforeMount:
91+
They allow you to access your component immediately before and after the first render.
92+
```javascript
93+
new Vue({
94+
beforeMount: function () {
95+
// `this` points to the view model instance
96+
console.log(`this.$el is yet to be created`);
97+
}
98+
})
99+
```
100+
2. mounted:
101+
This is a most used hook and you will have full access to the reactive component, templates, and rendered DOM (via. this.$el). The most frequently used patterns are fetching data for your component.
102+
```javascript
103+
<div id="app">
104+
<p>I'm text inside the component.</p>
105+
</div>
106+
new Vue({
107+
el: '#app',
108+
mounted: function() {
109+
console.log(this.$el.textContent); // I'm text inside the component.
110+
}
111+
})
112+
```
113+
3. **Updating (Diff & Re-render):**
114+
Updating hooks are called whenever a reactive property used by your component changes, or something else causes it to re-render
115+
1. beforeUpdate:
116+
The beforeUpdate hook runs after data changes on your component and the update cycle begins, right before the DOM is patched and re-rendered.
117+
```javascript
118+
<div id="app">
119+
<p>{{counter}}</p>
120+
</div>
121+
...// rest of the code
122+
new Vue({
123+
el: '#app',
124+
data() {
125+
return {
126+
counter: 0
127+
}
128+
},
129+
created: function() {
130+
setInterval(() => {
131+
this.counter++
132+
}, 1000)
133+
},
134+
135+
beforeUpdate: function() {
136+
console.log(this.counter) // Logs the counter value every second, before the DOM updates.
137+
}
138+
})
139+
```
140+
2. updated:
141+
This hook runs after data changes on your component and the DOM re-renders.
142+
```javascript
143+
<div id="app">
144+
<p ref="dom">{{counter}}</p>
145+
</div>
146+
...//
147+
new Vue({
148+
el: '#app',
149+
data() {
150+
return {
151+
counter: 0
152+
}
153+
},
154+
created: function() {
155+
setInterval(() => {
156+
this.counter++
157+
}, 1000)
158+
},
159+
updated: function() {
160+
console.log(+this.$refs['dom'].textContent === this.counter) // Logs true every second
161+
}
162+
})
163+
```
164+
4. **Destruction (Teardown):**
165+
Destruction hooks allow you to perform actions when your component is destroyed, such as cleanup or analytics sending.
166+
1. beforeDestroy:
167+
`beforeDestroy` is fired right before teardown. If you need to cleanup events or reactive subscriptions, beforeDestroy would probably be the time to do it. Your component will still be fully present and functional.
168+
```javascript
169+
new Vue ({
170+
data() {
171+
return {
172+
message: 'Welcome VueJS developers'
173+
}
174+
},
175+
176+
beforeDestroy: function() {
177+
this.message = null
178+
delete this.message
179+
}
180+
})
181+
```
182+
2. destroyed:
183+
This hooks is called after your component has been destroyed, its directives have been unbound and its event listeners have been removed.
184+
```javascript
185+
new Vue ({
186+
destroyed: function() {
187+
console.log(this) // Nothing to show here
188+
}
189+
})
190+
```
191+
52192
4. ### What are the conditional directives?
53193
VueJS provides set of directives to show or hide elements based on conditions. The available directives are: ** v-if, v-else, v-else-if and v-show**
54194
**1. v-if:** The v-if directive adds or removes DOM elements based on the given expression. For example, the below button will not show if isLoggedIn is set to false.

‎images/vuelifecycle.png

114 KB
Loading

0 commit comments

Comments
 (0)