Vue.js Interview Questions and Answers

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

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

The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end). The Vue.js was developed by “Evan You”, an Ex Google software engineer. The latest version is Vue.js 2. The Vue.js 2 is very similar to Angular because Evan You was inspired by Angular.

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.

v-model is a two-way binding for form inputs. It combines v-bind , which **brings a js value **into the markup, and v-on:input to update the js value. Consider:

<input v-model="something">

and it's just syntactic sugar for: <input

v-bind:value="something"
v-on:input="something = $event.target.value"
>
v-model works with all the basic HTML input types (text, textarea, number, radio, checkbox, select). You can use
v-model with input type=date if your model stores dates as ISO strings ( yyyy-mm-dd ).

v-model is a two-way binding for form inputs. It combines v-bind , which **brings a js value **into the markup, and v-on:input to update the js value. Consider:

<input v-model="something">

and it's just syntactic sugar for: <input

v-bind:value="something"
v-on:input="something = $event.target.value"
>
v-model works with all the basic HTML input types (text, textarea, number, radio, checkbox, select). You can use
v-model with input type=date if your model stores dates as ISO strings ( yyyy-mm-dd ).

Consider:

filters:{
  currency: function(value, arg1){
    return arg1+value;
  }

And usage:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>
<div id="vue-instance">
{{123 | currency('$') }}
</div>

Empowered HTML. This means that Vue.js has many similar characteristics with Angular and this can help to optimize HTML blocks handling with a usage of different components. Detailed documentation. Vue.js has very circumstantial documentation which can fasten learning curve for developers and save a lot of time to develop an app using only the basic knowledge of HTML and JavaScript. Adaptability. It provides a rapid switching period from other frameworks to Vue.js because of the similarity with Angular and React in terms of design and architecture. Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. The main thing is that smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system. Large scaling. Vue.js can help to develop pretty large reusable templates that can be made with no extra time allocated for that according to its simple structure. Tiny size. Vue.js can weight around 20KB keeping its speed and flexibility that allows reaching much better performance in comparison to other frameworks.

Consider:

filters:{
  currency: function(value, arg1){
    return arg1+value;
  }

And usage:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>
<div id="vue-instance">
{{123 | currency('$') }}
</div>

You want to totally nullify the time of the first rendering, the only way to go is to do server-side rendering. So your app will be served with the initial html structure already there.

In Vue.js following types of directives are available General Directives Literal Directives Empty Directives Custom Directives

Computed values and methods are very different in Vue and are definitely not interchangeable in most cases. A more appropriate name for a computed value is a computed property. You can think of a computed value as a derived value that will be automatically updated whenever one of the underlying values used to calculate it is updated. A method is just a function bound to the Vue instance. It will only be evaluated when you explicitly call it.

Props ( props ) - The simplest communication channel in Vue for direct Parent-Child communication. It should

mostly be used to pass data relating to presentation logic or a restricted set of data down the hierarchy. Refs and methods ( ref ) - When it doesn't make sense to use a prop to let a child handle an event from a parent, setting up a ref on the child component and calling its methods is just fine.

Events ( $emit and $on ) - The simplest communication channel for direct Child-Parent communication. Again, should be used for presentation logic. Event bus ( this.$root.$emit , this.$root.$on ) - This can become useful when passing props all over the place from far up down to deeply nested children components, with almost no other components needing these in between.

Centralized store (
Vuex) - Vuex is the way to go with Vue for state management. It offers a lot more than

just events and it's ready for full scale application.

With Vue 2.0, we using the eventHub mechanism. Consider:

const eventHub = new Vue()
// Single event hub
// Distribute to components using global mixin
Vue.mixin({
  data: function () {
    return {
      eventHub: eventHub
    }
}
})
// your component you can emit events with
this.eventHub.$emit('update', data)
// And to listen you do
this.eventHub.$on('update', data => {
  // do your thing
})

You can even make it shorter and use root Vue instance as global Event Hub:

// Component 1
this.$root.$emit('eventing', data);
// Component 2
mounted() {
  this.$root.$on('eventing', data => {
    console.log(data);
  });
}

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.

Consider:

// define a mixin object
var myMixin = {
  methods: {
    getProducts () {
      myApi.get('products?id=' + prodId).then(response => this.product = response.data)
    }
}
}// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})// alternate way to have a mixin while initialising
new Vue({
  mixins: [myMixin],
  created: function () {
    console.log('other code')
  }
})

If you only need very simple routing and do not wish to involve a full-featured router library, you can do so by dynamically rendering a page-level component like this:

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }
const routes = {
  '/': Home,
  '/about': About
}
new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
computed: {
  ViewComponent () {
    return routes[this.currentRoute] || NotFound
  }
},
render (h) { return h(this.ViewComponent) }
})

For most Single Page Applications, it’s recommended to use the officially-supported vue-router library.

You can always define a variable outside of the Vue app scope and use it throughout the application.

//const.js
export default {
  c1: 'Constant 1',
  c2: 'Constant 2'
}

And:

// component.vue
import const from './const';
export default {
  methods: {
    method() {
      return const.c1;
    }
}
}

Use the watch section in your vm creation:

var vm = new Vue({
  el: 'body',
  data: {
    items: []
  },
computed: {
  item_length: function () {
    return this.battle_logs.length;
  }
},
watch: {
  items: {
    handler: function () {
      console.log('caught!');
    },
  deep: true
}
}
});

Or watch a computed length attribute:

vm.$watch('item_length', function(newVal, oldVal) {
  console.log('caught!');
});

For Vue.js 2 you could have the active class be dependent upon a boolean data value:

class="initial"
v-on:click="myFilter"
v-bind:class="{ active: isActive }"
>
<span class="wkday">M</span>
</th>
methods: {
  myFilter: function(){
    this.isActive = !this.isActive;
    // some code to filter users
  }
}

Lack of resources. Vue.js still has a pretty small market share in comparison with React or Angular, which means that knowledge sharing in this framework is still in the beginning phase. Risk of over flexibility. Sometimes, Vue.js might have issues while integrating into huge projects and there is still no experience with possible solutions, but they will definitely come soon. Chinese background. As far as Vue.js has a bit of Chinese background, a lot of elements and descriptions are still available in Chinese. This leads to a partial complexity on some stages of development, nevertheless, more and more materials are being translated into English.

Lack of resources. Vue.js still has a pretty small market share in comparison with React or Angular, which means that knowledge sharing in this framework is still in the beginning phase. Risk of over flexibility. Sometimes, Vue.js might have issues while integrating into huge projects and there is still no experience with possible solutions, but they will definitely come soon. Chinese background. As far as Vue.js has a bit of Chinese background, a lot of elements and descriptions are still available in Chinese. This leads to a partial complexity on some stages of development, nevertheless, more and more materials are being translated into English.

You can use Vueify . it's a browserify transform.

gulp.task('browserify', function() {
  return gulp.src('src/js/main.js')
  .pipe(plumber())
  .pipe(browserify({
    debug: !env.p,
    transform: ['vueify']
  }))
.pipe(gulpif(env.p, uglify()))
.pipe(gulp.dest('build/js'));
});

Yes. Consider:

vm.$forceUpdate();

Use watch method to detect changes on variable you are storing data on like this:

watch: {
  input: function () {
    if (isLocalStorage()
    /* function to detect if localstorage is supported*/) {
      localStorage.setItem('storedData', this.input)
    }
}
}

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. The basic idea behind Vuex, inspired by Flux, Redux and The Elm Architecture. Vuex resolves two problems: Multiple views may depend on the same piece of state. Passing props can be tedious for deeply nested components, and simply doesn't work for sibling components. Actions from different views may need to mutate the same piece of state. We often find ourselves resorting to solutions such as reaching for direct parent/child instance references or trying to mutate and synchronize multiple copies of the state via events. Both of these patterns are brittle and quickly lead to unmaintainable code.

Yes. You can watch props to execute some code upon props changes:

new Vue({
  el: '#app',
  data: {
    text: 'Hello'
  },
components: {
  'child' : {
    template: `<p>{{ myprop }}</p>`,
    props: ['myprop'],
    watch: {
      myprop: function(newVal, oldVal) {
        // watch it
        console.log('Prop changed: ', newVal, ' | was: ', oldVal)
      }
  }
}
}
});

And in HTML:

<div id="app">
<child :myprop="text"></child>
<button @click="text = 'Another text'">Change text</button>
</div>

There are 4 ways: Stateless service: then you should use mixins Statefull service: use Vuex Export service and import from a vue code any javascript global object

If you are using vue-router , you should use router.go(path) to navigate to any particular route. The router can be accessed from within a component using this.$router . router.go() changed in VueJS 2.0. You can use

router.push({ name: "yourroutename"}) or just router.push("yourroutename") now to redirect.

Every component instance has its own isolated scope. This means you cannot (and should not) directly reference parent data in a child component’s template. Data can be passed down to child components using props. Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance.

Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

If you've created your project like this: vue init webpack myproject Now you can run npm run build Then copy index.html and /dist/ folder into your website root directory. Done.

Vue.js allows you to define filters that can be used to apply common text formatting. Filters are usable in two places: mustache interpolations and v-bind expressions (the latter supported in 2.1.0+). Filters should be appended to the end of the JavaScript expression, denoted by the “pipe” symbol:

{{ message | capitalize }}<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

A Vue.js application consists of a root Vue instance created with new Vue, optionally organized into a tree of nested, reusable components. For example, a todo app’s component tree might look like this: Root Instance └─ TodoList ├─ TodoItem │ ├─ DeleteTodoButton │ └─ EditTodoButton └─ TodoListFooter ├─ ClearTodosButton └─ TodoListStatistics All Vue components are also Vue instances.

Vue.js Advantages Easy for applications and interfaces development Support Two-way communication as like AngularJs Ability to control the states Natural thought process Vue.js Disadvantages Limited scope Single creator Small developer community

You can just do following:

localStorage.setItem('YourItem', response.data)
localStorage.getItem('YourItem')
localStorage.removeItem('YourItem')

You have access to a $route object from your components, that expose what we need.

//from your component
console.log(this.$route.query.test)

You can use a method or computed function. The method way:

<span>{{ fullName('Hi') }}</span>
methods: {
  fullName(salut) {
    return `${salut} ${this.firstName} ${this.lastName}`
  }
}

Computed property with a parameter way:

computed: {
  fullName() {
    return salut => `${salut} ${this.firstName}
    ${this.lastName}`
  }
}

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

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

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

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>

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 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.

Vue js comes with following features Templates Reactivity Components Transitions Routing