Google News
logo
Vue.JS Interview Questions
List of advantages of using Vue.js :
 
Very Small In Size :  One of Vue.js' biggest advantages is that it is very small in size. This exciting JavaScript plug-in is only 18-21KB, so you can download and use it very easily in no time.
 
Easy to Understand and Use : The framework of Vue.js is very easy to understand, and it id one of the reasons for the popularity of this framework. The users can easily add Vue.js to their web project because of its simple structure and develop applications.
 
Flexible in nature : The flexible nature of Vue.js also makes it easy to understand for the developers of React.js, Angular.js, and any other new JavaScript framework. It provides a lot of flexibility to use virtual nodes to write HTML files, JavaScript files, and pure JavaScript files.
 
Components : You can create reusable custom elements in Vue.js applications.
 
Virtual DOM : Vue.js uses virtual DOM similar to other existing frameworks such as ReactJS, Ember, etc. Virtual DOM is a light-weight in-memory tree representation of the original HTML DOM and updated without affecting the original DOM.
 
Two-Way Communication : Vue.js provides two-way communications with its MVVM architecture that makes it very easy to handle HTML blocks.

Simple Integration with Existing Applications : Vue.js framework can be integrated with the existing applications very easily. Vue.js has a lot of components for everything. You can integrate it with any application that is written in JavaScript.

Easy & comprehensive documentation : The documentation of Vue.js is very easy and comprehensive so that developers can develop applications or web pages, only having little knowledge about HTML.
List of some websites using Vue.js on parts of their projects and applications :
 
* Adobe
* Facebook
* Netflix
* Alibaba
* Laracast
* Behance
* Gitlab
* Euronews
* Codeship
* Livestorm
* Xiaomi
* Wizzair
* Grammarly etc,.
In one-way data binding (one-way data flow), the view (UI) part of the application does not update automatically. In this model, when the data Model is changed, you need to write some custom code to make it updated every time after the change. The v-bind directive is used for one-way data flow or binding in Vue.js.
 
On the other hand, in two-way data binding, the view (UI) part of the application is automatically updated when the data Model is changed. The v-model directive is used for two way data binding in Vue.js.
The v-model directive is used to create Two-Way Bindings in Vue js. In Two-Way Bindings, data or model binds with DOM, and Dom binds back to the model.
 
Let's see an example to demonstrate how Two-Way Bindings is implemented.
<div id="app">  
  {{message}}  
  <input v-model="message">  
</div>  
<script type="text/javascript">  
  var message = 'Vue.js is rad';  
  new Vue({ el: '#app', data: { message } });  
</script>
In Vue js filters are used to transform the output that are going to rendered on browser.

A Vue.js filter is essentially a function that takes a value, processes it, and then returns the processed value. In the markup it is denoted by a single pipe (|) and can be followed by one or more arguments:
<element directive="expression | filterId [args...]"></element>
In Vue 2.0, there are no built-in filters are availables, however you are free to create your own filters.
Vue.filter() method is used to create and register a custom filter in Vue js. Vue.filter() method takes two parameters a filterId that is usnique name to filter that you going to create and a filter function that takes a value as the argument and returns the transformed value.

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})
Virtual DOM in Vue is a JavaScript object that represents the Document Object Model (DOM). The application updates the Virtual DOM instead of the DOM directly. So, it minimizes the updating cost of the real DOM as it is computationally expensive. Virtual DOM offers the ability to control the timing at which the Virtual DOM is rendered. Virtual DOM will just maintain the state of the data without re-rendering until you choose it. Virtual DOM also offers the ability to optimize the performance of your web applications by minimizing the number of times the DOM has to be updated.
Vue.js implements a content distribution API using the element to serve as distribution outlets for content created after the current Web Components spec draft.
 
Let's create an alert component with slots for content insertion,
Vue.component('alert', {
  template: `
    <div class="alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})
Now you can insert dynamic content as below,
<alert>
  There is an issue with in application.
</alert>
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,
<template v-if="loginType === 'Admin'">
  <label>Admin</label>
  <input placeholder="Enter your ID">
</template>
<template v-else>
  <label>Guest</label>
  <input placeholder="Enter your name">
</template>
 
In this case, it shouldn't reuse. We can make both input elements as separate by applying key attribute as below,
    <template v-if="loginType === 'Admin'">
      <label>Admin</label>
      <input placeholder="Enter your ID" key="admin-id">
    </template>
    <template v-else>
      <label>Guest</label>
      <input placeholder="Enter your name" key="user-name">
    </template>
The above code make sure both inputs are independent and doesn't impact each other.
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.
 
Example usage :
<div v-for="item in items" :key="item.id">
  {{item.name}}
</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.