Google News
logo
Vue.JS Interview Questions
In Vue.js, the virtual DOM is a tree-like data structure or a collection of JavaScript objects that represents DOM nodes. Vue.js manage the nodes of the virtual DOM, and that should be rendered on the page. These objects are called "virtual nodes" or VNodes.
The virtual DOM's main purpose is to make DOM manipulation faster and more efficient. It becomes very crucial when you have a lot of nodes in your DOM. In this case, updating these nodes is a very expensive task for processing power and resources required. Here, virtual DOM comes into action and makes JavaScript object significantly faster. Vue.js automatically organizes DOM updates in batches to enhance efficiency.
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.
<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,
<template v-if="isLoggedIn">
  <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).
<button v-if="isLoggedIn"> Logout </button>
<button v-else> Log In </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.
<button v-if="isLoggedIn"> Logout </button>
<label v-else-if="isLoginDisabled"> User login disabled </label>
<button v-else> Log In </button>
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.
<span v-show="user.name">Welcome user,{{user.name}}</span>
Index v-show directive v-if directive
1. The v-if directive is used to render the element to the DOM only if the expression passes. The v-show directive is used to render all elements to the DOM and then uses the CSS display property to show/hide elements according to the expression.
2. The v-if directive also supports v-else and v-else-if directives. The v-show directive doesn't support the v-else and v-else-if directives.
3. The v-if directive has higher toggle costs since it adds or removes the DOM every time. The v-show directive has higher initial render costs.
4. The v-if directive has the advantage when it comes to initial render time. The v-show directive has a performance advantage if you have to switch on and switch off the elements frequently.
5. The v-if directive supports the tab. The v-show directive doesn't support the tab.
In Vue.js, the data is passed to child components from the parent component using a prop or a custom attribute. This custom attribute becomes a property on the child component instance. This procedure is called a one-way data flow.
 
Once the parent component updates a prop value, the child component is automatically updated. The child component can communicate back to the parent via an event, but mutating a property inside a child component should not be done. It does not affect the parent component also unless it is an object or array. When the child component instance emits an event, the parent assigns a handler to that event, and data is passed back to the parent.
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.
 
Array usage :
<ul id="list">
  <li v-for="(item, index) in items">
    {{ 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.
 
Object usage :
<div id="object">
  <div v-for="(value, key, index) of user">
    {{ index }}. {{ key }}: {{ value }}
  </div>
</div>
var vm = new Vue({
  el: '#object',
  data: {
    user: {
      firstName: 'John',
      lastName: 'Locke',
      age: 30
    }
  }
})
Every Vue application works by creating a new Vue instance with the Vue function. Generally the variable vm (short for ViewModel) is used to refer Vue instance. You can create vue instance as below,
var vm = new Vue({
  // options
})
As mentioned in the above code snippets, you need to pass options object. You can find the full list of options in the API reference.
The VUE-resource is a plug-in for Vue.js. This plug-in is used with Vue.js to make web requests and handle responses, in which XHMLHttpRequests or JSONP is used.
 
You can use the following yarn or npm command to install VUE-resource:
$ yarn add vue-resource  
$ npm install vue-resource   
You can install Vue.js in your project by using the following 4 methods:
 
* Yu can use CDN by including <script> tag in HTML file.
* You can install Vue.js by using Node Package Manager (NPM).
* You can install Vue.js using Bower.
* You can also use Vue-cli to setup your project.

CDN :  For prototyping or learning purposes, you can use the latest version with:
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.js"></script>
For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions:
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.0"></script>
If you are using native ES Modules, there is also an ES Modules compatible build:
<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.7.0/dist/vue.esm.browser.js'
</script>
You can browse the source of the NPM package at cdn.jsdelivr.net/npm/vue.
 
Vue is also available on unpkg and cdnjs (cdnjs takes some time to sync so the latest release may not be available yet).
 
Make sure to read about the different builds of Vue and use the production
version in your published site, replacing vue.js with vue.min.js. This is a smaller build optimized for speed instead of development experience.
 
NPM : NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as Webpack or Browserify. Vue also provides accompanying tools for authoring Single File Components.
# latest stable
$ npm install vue
CLI : Vue provides an official CLI for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds. See the Vue CLI docs for more details.

Source : v2.vuejs.org
You can achieve conditional group of elements(toggle multiple elements at a time) by applying v-if directive on <template> element which works as invisible wrapper(no rendering) for group of elements.
 
For example, you can conditionally group user details based on valid user condition.
<template v-if="condition">
  <h1>Name</h1>
  <p>Address</p>
  <p>Contact Details</p>
</template>