Vue.js Interview Questions

Vue js is progressive javascript script used to create dynamic user interfaces.Vue js is very easy to learn.In order to work with Vue js you just need to add few dynamic features to a website.You don’t need to install any thing to use Vue js just need add Vue js library in your project.

Vue js comes with following features

• Templates
• Reactivity
• Components
• Transitions
• Routing

The Life cycle of each Vue instance goes through a series of initialization steps when it is created.
– for example, it needs to set up data observation, compile the template, and create the necessary data bindings. Along the way, it will also invoke some lifecycle hooks, which give us the opportunity to execute custom logic. For example, the created hook is called after the instance is created:

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` points to the vm instance
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

There are also other hooks which will be called at different stages of the instance’s lifecycle, for example compiled, ready and destroyed. All lifecycle hooks are called with their this context pointing to the Vue instance invoking it. Some users may have been wondering where the concept of “controllers” lives in the Vue.js world, and the answer is: there are no controllers in Vue.js. Your custom logic for a component would be split among these lifecycle hooks.

Lifecycle Diagram

Below diagram shows complete life cycle of Vue Instance

Source: https://v1.vuejs.org/guide/instance.html#Instance-Lifecycle

Also, Read React js Interview questions

You can create Vue instance with the Vue function:

var vm = new Vue({
  // options
})

In one-way data flow the view(UI) part of application does not updates automatically when data Model is change we need to write some custom code to make it updated every time a data model is changed.

In Vue js v-bind is used for one-way data flow or binding.

In two-way data binding the view(UI) part of application automatically updates when data Model is changed.
In Vue.js v-model directive is used for two way data binding.

v-model directive is used to create Two-Way Bindings in Vue js.In Two-Way Bindings data or model is bind with DOM and Dom is binded back to model.

In below example you can see 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('')
})

Vue Components are one of most powerful features of Vue js.In Vue components are custom elements that help you extend basic HTML elements to encapsulate reusable code.
Following is the way to register a Vue component inside other component

export default {
  el: '#your-element'
  components: {
      'your-component'
  }
}

The concept of directive in Vue js is drastically simpler than that in Angular. Vue.js directives provides a way to extend HTML with new attributes and tags. Vue.js has a set of built-in directives which offers extended functionality to your applications.You can also write your custom directives in Vue.js .

Below are list of commonly used directives in Vue.js

• v-show
• v-if
• v-model
• v-else
• v-on

In Vue js following types of directives are available

• General Directives
• Literal Directives
• Empty Directives
• Custom Directives

VUE-resource is a plugin for vue.js that provides services for making web requests and handle responses using a XMLHttpRequest or JSONP
You can install it via yarn or NPM.

$ yarn add vue-resource
$ npm install vue-resource

To create constant const keyword is used.In Vue.js we suggest to create a seperate file for defining your consants.
Example:

Creating a Constant in Vue js.

export const SITE_URL = 'https://www.onlineinterviewquestions.com';

Importing a Constant in Vue js.

import {SITE_URL} from './path/to/constants.js';