Vuejs Interview Question 5-35

5. What are the lifecycle methods of VueJS?

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,

1. **Creation(Initialization):**

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.

1. beforeCreate:

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.

```javascript

new Vue({

data: {

beforeCreate: function () {

console.log('Nothing gets called at this moment')

// `this` points to the view model instance

console.log('count is ' + this.count);

}

})

// count is undefined

```

2. created:

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.

```javascript

new Vue({

data: {

created: function () {

// `this` points to the view model instance

console.log('count is: ' + this.count)

}

})

// count is: 10

```

**Note:** Remember that, You will not have access to the DOM or the target mounting element (this.$el) inside of creation hooks

2. **Mounting(DOM Insertion):**

Mounting hooks are often the most-used hooks and they allow you to access your component immediately before and after the first render.

1. beforeMount:

The beforeMount allows you to access your component immediately before and after the first render.

```javascript

new Vue({

beforeMount: function () {

// `this` points to the view model instance

console.log(`this.$el is yet to be created`);

}

})

```

2. mounted:

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.

```javascript

<p>I’m text inside the component.</p>

</div>

new Vue({

el: ‘#app’,

mounted: function() {

console.log(this.$el.textContent); // I'm text inside the component.

}

})

```

3. **Updating (Diff & Re-render):**

Updating hooks are called whenever a reactive property used by your component changes, or something else causes it to re-render

1. beforeUpdate:

The beforeUpdate hook runs after data changes on your component and the update cycle begins, right before the DOM is patched and re-rendered.

```javascript

<p>{{counter}}</p>

</div>

...// rest of the code

new Vue({

el: '#app',

data() {

return {

counter: 0

}

created: function() {

setInterval(() => {

this.counter++

}, 1000)

beforeUpdate: function() {

console.log(this.counter) // Logs the counter value every second, before the DOM updates.

}

})

```

2. updated:

This hook runs after data changes on your component and the DOM re-renders.

```javascript

<p ref="dom">{{counter}}</p>

</div>

...//

new Vue({

el: '#app',

data() {

return {

counter: 0

}

created: function() {

setInterval(() => {

this.counter++

}, 1000)

updated: function() {

console.log(+this.$refs['dom'].textContent === this.counter) // Logs true every second

}

})

```

4. **Destruction (Teardown):**

Destruction hooks allow you to perform actions when your component is destroyed, such as cleanup or analytics sending.

1. beforeDestroy:

`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.

```javascript

new Vue ({

data() {

return {

message: 'Welcome VueJS developers'

}

beforeDestroy: function() {

this.message = null

delete this.message

}

})

```

2. destroyed:

This hooks is called after your component has been destroyed, its directives have been unbound and its event listeners have been removed.

```javascript

new Vue ({

destroyed: function() {

console.log(this) // Nothing to show here

}

})

```

6. What are the conditional directives?

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**

**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.

```javascript

<button v-if="isLoggedIn">Logout</button>

```

You can also control multiple elements with a single v-if statement by wrapping all the elements in a `<template>` element with the condition. For example, you can have both label and button together conditionally applied,

```javascript

<label> Logout </button>

<button> Logout </button>

</template>

```

**2. v-else:** This directive is used to display content only when the expression adjacent v-if resolves to false. This is similar to else block in any programming language to display alternative content and it is preceded by v-if or v-else-if block. You don't need to pass any value to this.

For example, v-else is used to display LogIn button if isLoggedIn is set to false(not logged in).

```javascript

<button v-if="isLoggedIn"> Logout </button>

```

**3. v-else-if:** This directive is used when we need more than two options to be checked.

For example, we want to display some text instead of LogIn button when ifLoginDisabled property is set to true. This can be achieved through v-else statement.

```javascript

<button v-if="isLoggedIn"> Logout </button>

<label v-else-if="isLoginDisabled"> User login disabled </label>

```

**4. v-show:** This directive is similar to v-if but it renders all elements to the DOM and then uses the CSS display property to show/hide elements. This directive is recommended if the elements are switched on and off frequently.

```javascript

<span v-show="user.name">Welcome user,{{user.name}}</span>

```

7. What is the difference between v-show and v-if directives?

Below are some of the main differences between between **v-show** and **v-if** directives,

1. v-if only renders the element to the DOM if the expression passes whereas v-show renders all elements to the DOM and then uses the CSS display property to show/hide elements based on expression.

2. v-if supports v-else and v-else-if directives whereas v-show doesn't support else directives.

3. v-if has higher toggle costs while v-show has higher initial render costs. i.e, v-show has a performance advantage if the elements are switched on and off frequently, while the v-if has the advantage when it comes to initial render time.

4. v-if supports `<template>` tab but v-show doesn't support.

8. What is the purpose of v-for directive?

The built-in v-for directive allows us to loop through items in an array or object. You can iterate on each element in the array or object.

1. Array usage:

```javascript

{{ index }} - {{ item.message }}

</li>

</ul>

var vm = new Vue({

el: '#list',

data: {

items: [

{ message: 'John' },

{ message: 'Locke' }

]

}

})

```

You can also use `of` as the delimiter instead of `in`, similar to javascript iterators.

2. Object usage:

```javascript

{{ index }}. {{ key }}: {{ value }}

</div>

var vm = new Vue({

el: '#object',

data: {

user: {

firstName: 'John',

lastName: 'Locke',

age: 30

}

})

```

9. How do you reuse elements with key attribute?

Vue always tries to render elements as efficient as possible. So it tries to reuse the elements instead of building them from scratch. But this behavior may cause problems in few scenarios. For example, if you try to render the same input element in both `v-if` and `v-else` blocks then it holds the previous value as below,

```javascript

<label>Admin</label>

</template>

<label>Guest</label>

</template>

```

In this case, it shouldn't reuse. We can make both input elements as separate by applying **key** attribute as below,

```javascript

<label>Admin</label>

</template>

<label>Guest</label>

</template>

```

The above code make sure both inputs are independent and doesn't impact each other.

10. Why should not use if and for directives together on the same element?

It is recommended not to use v-if on the same element as v-for. Because v-for directive has a higher priority than v-if. There are two cases where developers try to use this combination,

1. To filter items in a list

For example, if you try to filter the list using v-if tag,

```javascript

<ul>

<li

v-for="user in users"

v-if="user.isActive"

:key="user.id"

<li>

</ul>

```

This can be avoided by preparing the filtered list using computed property on the initial list

```javascript

computed: {

activeUsers: function () {

return this.users.filter(function (user) {

return user.isActive

})

}

...... //

<ul>

<li

v-for="user in activeUsers"

:key="user.id">

<li>

</ul>

```

2. To avoid rendering a list if it should be hidden

For example, if you try to conditionally check if the user is to be shown or hidden

```javascript

<ul>

<li

v-for="user in users"

v-if="shouldShowUsers"

:key="user.id"

<li>

</ul>

```

This can be solved by moving the condition to a parent by avoiding this check for each user

```javascript

<li

v-for="user in users"

:key="user.id"

<li>

</ul>

```

11. Why do you need to use key attribute on for directive?

In order to track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique `key` attribute for each item with in `v-for` iteration. An ideal value for key would be the unique id of each item. Let us take an example usage,

```javascript

</div>

```

Hence, It is always recommended to provide a key with v-for whenever possible, unless the iterated DOM content is simple.

**Note:** You shouldn’t use non-primitive values like objects and arrays as v-for keys. Use string or numeric values instead.

12. What are the array detection mutation methods?

As the name suggests, mutation methods modifies the original array. Below are the list of array mutation methods which trigger view updates.

1. push()

2. pop()

3. shift()

4. unshift()

5. splice()

6. sort()

7. reverse()

If you perform any of the above mutation method on the list then it triggers view update. For example, push method on array named 'items' trigger a view update,

```javascript

vm.todos.push({ message: 'Baz' })

```

13. What are the array detection non-mutation methods?

The methods which do not mutate the original array but always return a new array are called non-mutation methods. Below are the list of non-mutation methods,

1. filter()

2. concat()

3. slice()

For example, lets take a todo list where it replaces the old array with new one based on status filter,

```javascript

vm.todos = vm.todos.filter(function (todo) {

return todo.status.match(/Completed/)

})

```

This approach won't re-render the entire list due to VueJS implementation.

14. What are the caveats of array changes detection?

Vue cannot detect changes for the array in the below two cases,

1. When you directly set an item with the index,For example,

```javascript

vm.todos[indexOfTodo] = newTodo

```

2. When you modify the length of the array, For example,

```javascript

vm.todos.length = todosLength

```

You can overcome both the caveats using `set` and `splice` methods, Let's see the solutions with an examples,

**First use case solution**

```javascript

// Vue.set

Vue.set(vm.todos, indexOfTodo, newTodoValue)

(or)

// Array.prototype.splice

vm.todos.splice(indexOfTodo, 1, newTodoValue)

```

**Second use case solution**

```javascript

vm.todos.splice(todosLength)

```

15. What are the caveats of object changes detection?

Vue cannot detect changes for the object in property addition or deletion., Lets take an example of user data changes,

```javascript

var vm = new Vue({

data: {

user: {

}

})

// `vm.name` is now reactive

vm.email = john@email.com // `vm.email` is NOT reactive

```

You can overcome this scenario using the Vue.set(object, key, value) method or Object.assign(),

```javascript

Vue.set(vm.user, 'email', john@email.com);

(or)

vm.user = Object.assign({}, vm.user, {

email: john@email.com

})

```

16. How do you use v-for directive with a range?

You can also use integer type(say 'n') for v-for directive which repeats the element many times.

```javascript

<div>

</div>

```

It displays the number 1 to 20.

17. How do you use v-for directive on template?

Just similar to v-if directive on template, you can also use a `<template>` tag with v-for directive to render a block of multiple elements. Let's take a todo example,

```javascript

<ul>

<li>{{ todo.title }}</li>

</template>

</ul>

```

18. How do you use event handlers?

You can use event handlers in vue similar to plain javascript. The method calls also support the special $event variable.

```javascript

Submit

</button>

methods: {

show: function (message, event) {

// now we have access to the native event

if (event) event.preventDefault()

console.log(message);

}

```

19. What are the event modifiers provided by vue?

Normally, javascript provides event.preventDefault() or event.stopPropagation() inside event handlers. You can use methods provided by vue, but these methods are meant for data logic instead of dealing with DOM events. Vue provides below event modifiers for v-on and these modifiers are directive postfixes denoted by a dot.

1. .stop

2. .prevent

3. .capture

4. .self

5. .once

6. .passive

Let's take an example of stop modifier,

```html

```

You can also chain modifiers as below,

```html

```

20. What are key modifiers?

Vue supports key modifiers on `v-on` for handling keyboard events. Let's take an example of keyup event with enter keycode.

```html

```

Remembering all the key codes is really difficult. It supports the full list of key codes aliases

1. .enter

2. .tab

3. .delete (captures both “Delete” and “Backspace” keys)

4. .esc

5. .space

6. .up

7. .down

8. .left

9. .right

Now the above keyup code snippet can be written with aliases as follows,

```javascript

// (OR)

```

**The use of keyCode events is deprecated and may not be supported in new browsers.**

21. How do you define custom key modifier aliases?

You can define custom key modifier aliases via the global `config.keyCodes`. There are few guidelines for the properties

1. You can't use camelCase. Instead you can use kebab-case with double quotation marks

2. You can define multiple values in an array format

```javascript

Vue.config.keyCodes = {

f1: 112,

"media-play-pause": 179,

down: [40, 87]

}

```

22. What are the supported System Modifier Keys?

Vue supports below modifiers to trigger mouse or keyboard event listeners when the corresponding key is pressed,

1. .ctrl

2. .alt

3. .shift

4. .meta

Lets take an example of control modifier with click event,

```javascript

<div @click.ctrl="doSomething">Do something</div>

```

23. What are the supported Mouse Button Modifiers?

Vue supports below mouse button modifiers

1. .left

2. .right

3. .middle

For example, the usage of `.right` modifier as below

```javascript

<button

v-if="button === 'right'"

v-on:mousedown.right="increment"

v-on:mousedown.left="decrement"

```

24. How do you implement two-way binding?

You can use the `v-model` directive to create two-way data bindings on form input, textarea, and select elements. Lets take an example of it using input component,

```javascript

<p>The message is: {{ message }}</p>

```

Remember, v-model will ignore the initial `value`, `checked` or `selected` attributes found on any form elements. So it always use the Vue instance data as the source of truth.

25. What are the supported modifiers on model?

There are three modifiers supported for v-model directive.

**1. lazy:** By default, v-model syncs the input with the data after each input event. You can add the lazy modifier to instead sync after change events.

```javascript

```

**2. number:** If you want user input to be automatically typecast as a number, you can add the number modifier to your v-model. Even with type="number", the value of HTML input elements always returns a string. So, this typecast modifier is required.

```javascript

```

**3. trim:** If you want whitespace from user input to be trimmed automatically, you can add the trim modifier to your v-model.

```javascript

```

26. What are components and give an example?

Components are reusable Vue instances with a name. They accept the same options as new Vue, such as data, computed, watch, methods, and lifecycle hooks(except few root-specific options like el). Lets take an example of counter component,

```javascript

// Define a new component called button-counter

Vue.component('button-counter', {

template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'

data: function () {

return {

}

})

```

Let's use this component inside a root Vue instance created with new Vue

```javascript

<button-counter></button-counter>

</div>

var vm = new Vue({ el: '#app' });

```

27. What are props?

Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance. You can pass those list of values as props option and use them as similar to data variables in template.

```javascript

Vue.component('todo-item', {

props: ['title'],

})

```

Once the props are registered, you can pass them as custom atrtributes.

```javascript

<todo-item title="Learn Vue conceptsnfirst"></todo-item>

```

28. When component needs a single root element?

Every component must have a single root element **when template has more than one element**. In this case, you need to wrap the elements with a parent element.

```javascript

<h2>{{ title }}</h2>

</div>

```

Otherwise there will an error throwing, saying that "Component template should contain exactly one root element...".

29. How do you communicate from child to parent using events?

If you want child wants to communicate back up to the parent, then emit an event from child using `$event` object to parent,

```javascript

Vue.component('todo-tem', {

props: ['todo'],

<h3>{{ todo.title }}</h3>

Add

</button>

</div>

})

```

Now you can use this todo-item in parent component to access the count value.

```javascript

<li>

<todo-item

v-bind:key="todo.id"

v-bind:todo="todo" v-on:increment-count="total += 1"></todo-item>

</li>

</ul>

<span> Total todos count is {{total}}</span>

```

30. How do you implement model on custom input components?

The custom events can also be used to create custom inputs that work with v-model. The <input> inside the component must follow below rules,

1. Bind the value attribute to a value prop

2. On input, emit its own custom input event with the new value.

Let's take a custom-input component as an example,

```javascript

Vue.component('custom-input', {

props: ['value'],

<input

v-bind:value="value"

v-on:input="$emit('input', $event.target.value)"

})

```

Now you can use `v-model` with this component,

```javascript

<custom-input v-model="searchInput"></custom-input>

```

31. What are slots?

Vue implements a content distribution API using the <slot> element to serve as distribution outlets for content created after after the current Web Components spec draft. Let's create an alert component with slots for content insertion,

```javascript

Vue.component('alert', {

<strong>Error!</strong>

</div>

})

```

Now you can insert dynamic content as below,

```javascript

<alert>

There is an issue with in application.

</alert>

```

32. What is global registration in components?

The components which are globally registered can be used in the template of any root Vue instance (new Vue) created after registration. In the global registration, the components created using Vue.component as below,

```javascript

Vue.component('my-component-name', {

// ... options ...

})

```

Let's take multiple components which are globally registered in the vue instance,

```javascript

Vue.component('component-a', { /* ... */ })

Vue.component('component-b', { /* ... */ })

Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

```

The above components can be used in the vue instance,

```javascript

<component-a></component-a>

<component-b></component-b>

<component-c></component-c>

</div>

```

Remember that the components can be used in subcomponents as well.

33. Why do you need local registration?

Due to global registration, even if you don't use the component it could still be included in your final build. So it will create unnecessary javascript in the application. This can be avoided using local registration with the below steps,

1. First you need to define your components as plain JavaScript objects

```javascript

var ComponentA = { /* ... */ }

var ComponentB = { /* ... */ }

var ComponentC = { /* ... */ }

```

Locally registered components will not be available in sub components. In this case, you need to add them in components section

```javascript

var ComponentA = { /* ... */ }

var ComponentB = {

components: {

'component-a': ComponentA

// ...

}

```

2. You can use the components in the components section of the vue instance,

```javascript

new Vue({

el: '#app',

components: {

'component-a': ComponentA,

'component-b': ComponentB

}

})

```

34. What is the difference between local and global registration in module system?

In **local registration**, you need to create each component in components folder(optional but it is recommended) and import them in another component file components section. Let's say you want to register component A and B in component C, the configuration seems as below,

```javascript

import ComponentA from './ComponentA'

import ComponentB from './ComponentC'

export default {

components: {

ComponentA,

ComponentB

// ...

}

```

Now both ComponentA and ComponentB can be used inside ComponentC‘s template.

In **global registration**, you need to export all common or base components in a separate file. But some of the popular bundlers like `webpack` make this process simpler by using `require.context` to globally register base components in the below entry file(one-time).

```javascript

import Vue from 'vue'

import upperFirst from 'lodash/upperFirst'

import camelCase from 'lodash/camelCase'

const requireComponent = require.context(

// The relative path of the components folder

'./components',

// Whether or not to look in subfolders

false,

// The regular expression used to match base component filenames

/Base[A-Z]\w+\.(vue|js)$/

)

requireComponent.keys().forEach(fileName => {

// Get component config

const componentConfig = requireComponent(fileName)

// Get PascalCase name of component

const componentName = upperFirst(

camelCase(

// Strip the leading `./` and extension from the filename

fileName.replace(/^\.\/(.*)\.\w+$/, '$1')

)

// Register component globally

Vue.component(

componentName,

// Look for the component options on `.default`, which will

// exist if the component was exported with `export default`,

// otherwise fall back to module's root.

componentConfig.default || componentConfig

)

})

```

35. What are possible prop types?

You can declare props with type or without type. But it is recommended to have prop types because it provides the documentation for the component and warns the developer for any incorrect data type being assigned.

```javascript

props: {

age: Number,

isAuthenticated: Boolean,

phoneNumbers: Array,

address: Object

}

```

As mentioned in the above code snippet, you can list props as an object, where the properties’ names and values contain the prop names and types, respectively.

ATechnoz

Search This Blog

Vuejs Interview Question 5-35

Comments

Post a Comment