Top 30 Vue.js Interview Questions for 2022
Most Frequently asked Vue.js Interview Questions
Q.1 What is Vue.js?
Vue.js is an open-source progressive JavaScript framework, which is used to build a single-page application and dynamic user interface. The core library of the Vue.js framework is mainly focused on the view layer. It is easy to integrate with other external third-party libraries or existing projects.
Q.2 What are the features of Vue.js?
Some important features of the Vue.js are as follows:
- Virtual DOM: Vue.js framework uses the Virtual DOM, which is also used by the other existing frameworks like Ember, React JS, and others. It is essentially a clone of the original DOM element that absorbs every modification intended for the virtual DOM, which presents as the JavaScript data structure. The changes perform in the JavaScript data structure are compared with the real data structure. Only the last changes will reflect the original DOM, which viewers can see.
- Components: Vue.js components are used to build a reusable custom element in the Vue.js application.
- Templates: It provides the HTML based templates that bind the DOM with the Vue.js instance data.
- Complexity: Vue.js is very simple in terms of API, as well as design. Developers can build the user interface and single-page applications very easily.
- Routing: Vue-router helps the user to navigate between the pages in the single-page application.
- Lightweight: It is a lightweight frontend JavaScript framework compared to other frameworks, and the performance of Vue.js is very fast.
Q.3 How to create a Vue.js instance?
Every Vue.js application always starts with the creation of a new Vue instance with the Vue function.
var vm = new Vue ({
// options
})
Q.4 What are the life cycle hooks in Vue.js?
Lifecycle hooks are the specified methods executed in a certain phase of the lifespan of the Vue object. Starting from the initialization up to when it destroyed, the Vue object follows various phases of the lifecycle hooks. Here we are going to discuss the life cycle hooks that are used in the Vue.js.
- beforeCreate: A Vue object is quickly evaluated with a new method. It creates a Vue class object to handle the DOM elements. The beforeCreate hook could access this lifecycle stage of the Vue object.
- Created: In this Created hook, the Vue objects and its events are completely initialized. This hook is used to write and access the code in the phase.
- beforeMount: In the beforeMounted hook, it checks the template in the object to be rendered in the DOM is available or not. If there is no template found, the external HTML of the specified element is considered as a template.
- Mounted: When the template is ready, it adds the data to the templates and builds the renderable elements. With the new data filled element, it replaces the element of the DOM. These processes are done in the Mounted hook.
- beforeUpdate: This hook will run after changing the Vue component's data, and the update lifecycle starts. But this hook runs before the original DOM element is patched and re-rendered.
- Updated: This updated hook will run after changing the data on our Vue component, and the DOM elements re-renders.
- beforeDestroy: The beforeDestroy hook is removed just before the Vue object gets destroyed and released from the memory and helps us to manage our custom code in it.
- Destroyed: After a successful run of destroying on the object, the destroyed hook is invoked.
Q.5 What is the difference between v-show and v-if directives?
Some of the main difference between the v-show and v-if directives are:
- The v-show renders all the DOM elements and then uses the CSS display property to show or hide the elements based on expression while v-if only renders the DOM element when the expression passes.
- The v-show directive doesn’t support v-else directives, while v-if directive supports the v-else and v-else-if directives.
- The V-show directive has initial render costs while v-if directive has higher toggle costs. It means that the v-show directive has the advantage of performance when the elements are frequently switched on/off, whereas the v-if directive has an advantage when it comes to the initial render time.
- v-if directive supports the <template> tab but v-show directive doesn’t support the <template> tab.
Q.6 What is the difference between one-way data flow and two-way data binding?
One-way data flow: When the data model is changed, the view (UI) component of the application does not automatically update in the one-way data flow. So if we want to change the data model, it is required to write some custom code to update it. One-way data flow or binding uses the v-bind directive in the Vue.js application.
Two-way data binding: When the data model is changed, the view (User Interface) part of an application is updated automatically in the two-way data binding. Two-way data binding uses the v-model directive in the Vue.js application.
Q.7 What are Vue.js filters?
Vue.js filter allows us to apply the common text formatting. It can be used in two places that are v-bind expressions and mustache interpolations. Vue.js filters are denoted by single pipe ( | ) symbol and can be applied to the end of JavaScript expressions.
<!-- In mustache interpolations -->
{{ message | capitalize }}
<!-- v-bind expressions -->
<div v-bind: id= “expression | filterId”></div>
Q.8 What are Mixins?
The Vue mixins are a flexible method for distributing reusable features to the Vue component. An object of mixin can have various options for components. Mixins share the reusable code blocks among the components. Whenever a Vue component uses a mixin, all of the mixin options of Vue.js are “mixed” into the component’s options.
Example:
Var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
message(“This is the Vue.js mixin example”);
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
Note: Multiple mixins can be defined in the component mixin array.
Q.9 What are the components in Vue.js? And how to register a component into the other component.
Vue.js components are single, independent units present in the interface. Vue.js components have their own style, markup, and state. Vue components are the custom elements that help us to expand the HTML components to encapsulate the reusable code completely.
The following way used to register a component into the other component:
export default {
el: ‘#app’
components: {
‘my-component’
}
}
Q.10 What are slots?
Vue.js implements the content distribution API using an element to provide distribution outlets for content created after the specific design of current Web Components. Now, let’s create an alert component using slots for content insertion.
Vue.component( ‘alert’, {
template:
<div class= “alert-message”>
<slot></slot>
</div>
})
We can insert the dynamic content using the statement given below:
<alert>
This is an alert message
</alert>
Q.11 What are Vue.js props?
Vue.js props are custom attributes that can be assigned on a Vue component. Once a value is assigned to the prop attribute, it is able to make property on that instance of the component. We can pass those array list of values as props options and use them in the template as similar to data variables.
Example:
Vue.component(‘todo-item’, {
props: [‘message’],
template: ‘<h2>{{ message }}</h2>’
})
When the props are registered, we can pass them as a custom attribute.
<todo-item message= “This is a Prop Example”></todo-item>
Q.12 What are the Advantages and Disadvantages of Vue.js?
Following are the advantages and disadvantages of Vue.js:
Advantages
- It is easy to understand and create Vue.js applications.
- It supports two-way communication like as angular JS.
- Its natural thought processes.
- The ability to control the states.
Disadvantages
- Vue.js has limited scope.
- Vue.js is a single app creator.
- It’s a small developer community.
Q.13 What is the Vue router and its features?
Vue Router is an official single page application routing library designed to use with the Vue.js framework.
Following are the features of Vue Router:
- View Mapping/Nested Route
- Fine-grained navigation control
- Modular, component-based router configuration
- Wildcards, query, Route params
- Links with automatic active CSS classes
- View transition effects powered by Vue.js’ transition system
- Customizable Scroll Behavior
- HTML5 history mode or hash mode, with auto-fallback in IE9
Q.14 What is VueX?
VueX is a state management pattern and library (Flux-Inspired application architecture) for the Vue.js application. It acts as a centralized store for all various Vue components of the Vue.js app. It contains rules to confirm that the state can be changed in a predictable manner. In order to provide additional features, it can be integrated with Vue’s official devtool extension. VueX mainly helps to deal with the cost of more concepts and boilerplate when dealing with the shared state administration.
Q.15 What are async components in Vue.js?
We can split the app into the smaller chunks in the large Vue.js application, and only load a component from the server whenever necessary. To make this easier, Vue.js helps us to specify our Vue component as a factory function, which asynchronously resolves the definition of our component. Such types of components are known as the async component. If the component needs to render and cache the result for future renders, Vue can only trigger the factory function. Now, let’s take an example of the async component with the webpack code-splitting features.
Example:
Vue.component(‘webpack-example’, function (resolve, reject) {
//Webpack divides our built code automatically into bundles that are loaded with Ajax requests.
require([ ‘./async-component’], resolve)
})
Q.16 What are inline templates in Vue.js?
If we keep an inline template on a child component, instead of treating it as reusable independent content, it will use its inner content as a template.
Example:
<app-component inline-template> <div> <h1>Inline templates</h1> <p>This is an inline template</p> </div> </app-component>
Although these inline templates make template authoring more flexible, it is recommended to specified the template with template property or tag within the .vue component.
Q.17 What are the directives in Vue.js, list some of them you used?
Vue directive is a Vue instruction that helps us to do a thing in a certain way. Vue Directives are like HTML attributes that are included inside the Vue.js templates. We may also write our custom directives in the Vue.js application.
Following Vue directives are listed below:
- v-show
- v-if
- v-model
- v-else
- v-on
Q.18 What is a render function?
Render function is a normal function that receives a method to createElement since it is the first argument used to create virtual nodes. At the time of development, the Vue.js template actually compiles down to the render functions. The render function is implemented here as an alternative to templates to build dynamic components successfully.
Let’s take an example of a simple div markup and the corresponding rendering function. We can write the HTML markup in the template tag, as shown below:
Example:
<template>
<div:class= “{‘is-rounded’: isRounded}”>
<p>This is a Vue render functions</p>
</div>
</template>
Now, the rendering function compiled down or explicit will be appeared, as shown below,
render: function (createcomponent) {
return createcomponent(‘div’, {
‘class’: {
‘is-rounded’: this.isRounded
}
}, [
createcomponent(‘p’, ‘This is a Vue render functions’)
]);
},
The react components are created with rendering functions in JSX.
Q.19 How to handle events in Vue.js?
We can use the v-on directive to manage events in the Vue.js application. It allows us to add interactivity to web applications by responding to the developer’s input.
Q.20 What is the main purpose of Vue.js once directive?
If we want to render a lot of static content, we have to make sure that it is evaluated only once and cached afterward. In this case, we can use the v-once directive wrapping at the root level.
Q.21 What is Single File Components?
A single-file component (SFC) is a .vue extension file which has a Vue component. The SFC contains components like templates, style, and logic, all bundled together in a single file. it includes of one block <script>, optional <style> and <template> blocks, and other possible additional custom blocks.
If we want to use one of them, it is required to set up a Vue loader for parsing the file. But this also supports the use of non-default languages with pluggable preprocessors, such as Sass or HTML templating languages.
Q.22 How to use a plugin in Vue.js?
We can use a plugin bypassing it to Vue’s use global method. It is required to apply this method before starting our app by calling the new Vue() method.
Example:
// calls ‘MyPlugin.install(Vue, { someOption: true })’
Vue.use(MyPlugin)
new Vue({
//... options
})
Q.23 What is Virtual DOM, and how it’s beneficial in Vue.js?
Virtual DOM is a collection of JavaScript objects that represent DOM nodes managed by Vue.js and should be rendered on the page. These JavaScript objects are known as Virtual nodes.
The main purpose of Virtual DOM is quicker and more efficient manipulation of the DOM. When DOM contains lots of nodes, then updating them can be expensive in terms of processing power and resources required.
Working with the JavaScript virtual DOM object is substantially faster. Afterward, Vue.js organizes DOM updates in batches for greater performance.
Q.24 What are global mixins?
Sometimes in the global mixin, there is a requirement to expand the Vue functionality or include an option for all components of the Vue included in our application. In these cases, mixins can be applied globally to all the Vue.js components. These mixins are called global mixins.
Q.25 What are the main similarities between the Vue.js and React JS?
Even though the Vue.js and React JS are two different frameworks, but there are some similarities between these frameworks. Some of the similarities are as follows:
- Both frameworks are based on the Virtual DOM model.
- They are intended to operate with the root library, while all the additional activities are transferred to other libraries such as routing, state management, etc.
- These frameworks offer features such as component-based structure and reactivity.
Q.26 What is the difference between Vue.js and React JS framework?
Even though these frameworks have some common features, there is a difference between the Vue.js and React JS.
| Features | Vue.js | React JS |
| Type | It is a JavaScript MVC framework. | It is a JavaScript Library. |
| Platform | It is primarily focused on web development. | It is focused on both Web and Native applications. |
| Learning Curve | It is easy to use and learn the framework. | It is a steep learning curve and needs deep knowledge. |
| Simplicity | It is simpler than React JS. | It is more complex than Vue.js. |
| Bootstrap Application | It uses Vue-CLI. | It uses CRA (Create React App). |
Q.27 What is the difference between the Vue.js and Angular JS?
There are some common features in these frameworks because Angular JS is the basis for Vue.js development in the beginning. There are some differences between the Vue.js and React JS as listed below:
| Features | Vue.js | Angular JS |
| Complexity | It is easy to learn and use simple API and design. | Angular JS is a bit huge and required some learning curve on typescript, etc. |
| Data Binding | One-way data binding. | Two-way data binding. |
| Learning curve | It is easy to use and learn the framework. | Steep learning curve and need deep knowledge. |
| Founders | It is created by an ex-employee of Google. | It is powered by Google. |
| Initial Release | It was initially released in February 2014. | It was initially released in September 2016. |
| Model | It is based on the Virtual DOM (Document Object Model). | It is based on MVC (Model-View-Controller). |
| Written In | It is written in JavaScript only. | It is written in TypeScript. |
Q.28 What are Dynamic Components?
The dynamic component is used to switch dynamically between multiple components, using the element and passing data to v-bind: is an attribute.
Q.29 How do you use Event Handlers?
We can use the event handlers in the Vue.js framework similar to plain JavaScript. The call method also supports a special $event variable.
Example:
<button v-on:click= “show(‘Welcome to VueJS Appliaction’, $event)”>
Submit
</button>
methods: {
show: function (title, event) {
// we have access to the native event
if (event) event.preventDefault()
console.log(title);
}
}
Q.30 What are Key Modifiers?
Vue.js supports v-on key modifiers for handling keyboard events. Let’s take an example of a key up event with keycode.
<!-- only call ‘vm.show() method’ when the ‘keyCode’ is 15 --> <input v-on:keyup.15=“show”>
It’s very hard to remember all the key codes. It supports the full list of the key code’s aliases.
- .enter
- .tab
- .up
- .delete (captures both “Backspace” and “Delete” keys)
- .down
- .left
- .space
- .esc
- .right