Vue.js Interview Questions and Answers

Vue.js is a JavaScript library for building web interfaces. Vue (It pronounce view) is a progressive framework for building user interfaces. Vue.js is extremely easy. Unlike other monolithic frameworks (React or Angular), Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. It also supports the MVVM (Model-View-ViewModel) pattern.

Vue is very simple, it features a lot of concepts from Angular 1 and React. You can use it without any build system just include it into HTML file. But React is bigger and a little more complex. Vue 2.0 supports server-side rendering, helping you with SEO, and makes your site viewable by people with Javascript disabled. VueJS has a huge set of followers and it’s easier for beginners to adopt. You can use it with or without jQuery. You won’t need to install any plugins, though many are available. And it has proven track-record of success with Laravel. The goal of Vue.js is to provide the benefits of reactive data binding and composable view components with an API that is as simple as possible.

The plugin for Vue.js all the https provides services for making (get or post method) web requests and handle all the success or error responses using an XMLHttpRequest or JSONP data using vuejs. Installation: “$ npm install vue-resource” or $ yarn add vue-resource.  It supports the Promise API and URI Templates. It supports interceptors for request and response.

Basic features of Vue.js are:

• Component-oriented development style
• It is easy for web developers
• Lean and extensive core
• Flexible transition effect System

In Vue.js, Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue’s compiler attaches behavior to. In some cases, they may also appear as a native HTML element extended with the special is attribute. All Vue components are also Vue instances, and so accept the same options object (except for a few root-specific options) and provide the same lifecycle hooks. Following is the way to register a Vue component inside other component

export default {

  el: ‘#your-element’

  components: {

      ‘your-component’

  }

}

Vue.filter () method is used to create and register a custom filter in Vue js. Vue.filter() method takes two parameters a filtered that is unique 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 (”)

})

Usage:

Directives are instruction for VueJS to do things in a certain way. There are different types of directives in Vue.js

Reactive Directives             Literal Directives               Empty Directives

V-text                              v-transition                       v-pre

V-html                             v-ref                                v-cloak

V-show                             v-el

V-class

V-attr

V-style

V-on

V-model

v-if

V-repeat

• extend (options)
• nextTick (callback)
• nextTick (callback)
• elementDirective (id, [definition]
• Filter (id, [definition])
• Component (id, [definition])
• Transition (id, [definition])
• Partial (id, [partial])
• Use (plugin, [args…])
• mixin (mixin)
• util

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>

Every Vue application starts by creating a new Vue instance with the Vue function:

var vm = new Vue({

  // options

})

<div class=”class1″  v-bind: class=”{‘class2’: (!variable)}”></div>

The Vue.js 2 is similar to ReactJs and Angular in some ways. There are some key features that will help us to start easily i.e. Directives, Components, Template and JSXRouting. Vue 2.0 one of the fastest frameworks out there. In addition, it requires minimal effort in terms of optimization because Vue’s reactivity system is able to precisely determine components that need to be re-rendered in a large and complex component tree.

• The Vuejs virtual DOM rendering is so faster than that of ReactJs virtual DOM rendering.
• The Vuejs component’s dependencies are automatically render but ReactJs avoid unnecessary re-rendering so we can manually implement.
• The Vuejs 2 app size is smaller than ReactJs and Angular.
• React and Vue.js are Utilize a virtual DOM.
• React and Vue.js are Provide a compassable view component.
• React and Vue.js are handling state, routing, network requests and so on.

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.

• BeforeCreate (): this is called synchronously after the VueJs instance has just been initialized.
• Created (): this is called synchronously after the VueJs instance is created.
• Before Mount (): this is called right before the component is mounted.
• Mounted (): this is called after the component has just been mounted
• BeforeUpdate (): this is called when the data changes, before the virtual DOM is re-rendered.
• Updated (): this is called after a data change.
• Activated (): this is called when a kept alive component is activated.
• Deactivated (): this is called when a kept alive component is deactivated.
• BeforeDestroy (): this is called right before a VueJs instantiated.
• Destroyed (): this is called after a VueJs instance has been destroyed.

Pros of Vue.js:

• js is a very small size.
• It is flexibility.
• js is useful both for building entire single page applications and for contributing components into existing apps.
• It is easy to understand and develop applications. It enables development of large scale templates.
• js has a very thorough and well-written documentation, especially for beginners.
• Facilitates two-way communication.

Cons of Vue.js:

• It is a closed community development: unlike other frameworks, Vue doesn’t yet have the widespread support of its fellow frameworks as it is not as popular as React or Angular 2 or4.
• Language Barrier: a Majority of the users are non-English speaking communities which are perhaps one of the biggest issues with this framework.
• Being too flexible can be problematic