All Interviews

Top 50 Vue.js Interview Questions and Answers

29/Sep/2020 | 20 minutes to read

Here is a List of essential Vue.js Interview Questions and Answers for Freshers and mid level of Experienced Professionals. All answers for these Vue.js questions are explained in a simple and easiest way. These questions will help you to clear your next Job interview.


Best Answers to Vue.js Interview Questions

These interview questions are targeted for Vue.js that's a JavaScript based framework and used to implement SPAs. These are the most frequently asked Vue.js interview questions.


1. What is Vue.js?

Vue.js is a JavaScript based framework that is developed to build user interfaces. It's Progressive framework. Vue.js is mainly responsible for view layer only and is easy to integrate with other libraries on existing applications. Vue.js has the capability to develop single page applications (SPA).

2. What are the benefits of using Vue.js over other front end frameworks.

Vue.js comes with many benefits as below.

  • Small Size - For any JavaScript framework, success depend on it's size. Vue has very small size around 18 to 22 KB that can be easily downloaded and used.
  • Easy to Understand - Vue.js provides very simple structure so it can be used in both small and larger projects in an easy way.
  • Easy Integration - Vue is JavaScript based framework so it can be integrated with other applications easily and provides components for everything.
  • Flexibility - It provides the options to write templates in HTML file, JavaScript file and pure JavaScript files using virtual nodes so this concepts makes it easier to the developers of React, Angular and other JavaScript backgrounds.
  • Two-Way Communication - Vue.js supports MVVM architecture partially and provide the two-way binding concept similar to AngularJS that speeds up HTML blocks.
  • Documentation - Easy documentation is available.
  • Great Tools - It comes with great tooling like CLI that can create your initial application setup.

3. Explain the one-way and two-way data binding.

Vue supports both one-way and two-way data binding options.
One-way Binding - It's most basic form of data binding, you can update classes, styles from JavaScript properties as below.

<span v-bind:class="{ active: isActive }"></span>
Two-Way Binding - it updates HTML View and their related JavaCript properties as below.

    <input v-model="message" placeholder="edit me"><span>Message is: {{ message }}</span>

4. How will you create an instance in Vue.js?

Vue's design is partially inspired by MVVM pattern. That is the reason it's instance sometimes referred as 'vm'. You can start the execution of Vue.js application by creating it's instance as below.


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

5. Explain Interpolations and Binding Expressions.

Both are used for binding.

  • Interpolation is most basic form of binding using double curly braces. You can bind Text, Raw HTML, Attributes as below.
    <span>Message: {{ msg }}</span> // Text binding
    <span>{{{ raw_html }}}</span>   // use triple Mustache (curly braces) for RAW HTML binding
    <span id="item-{{ id }}"></span> // attribute binding
  • Binding Expressions - statements inside curly braces are the expressions, that can be followed by some filters.
    {{ number + 1 }}
    {{ ok ? 'YES' : 'NO' }}

6. Explain directives in Vue.js.

Directive is a special code in the markup that informs the library to perform something with that DOM element. Vue has some built-in directives like v-bind, v-model etc. You can create custom directives as well.

// Register a global custom directive called `v-focus`
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the applied element
    el.focus()
  }
})
// To create a local directive components has directives option as below.
directives: {
  focus: {
    // directive definition
    inserted: function (el) {
      el.focus()
    }
  }
}
// directive usage <input v-focus>

7. Explain the components in Vue.js.

Components are the Vue instances that can be reused. Component has a name, with that a component can be used as custom element inside root vue instance.


// component example
Vue.component('button-count', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})
// component usage
<div id="components-work"><button-count></button-count></div>
// js code
new Vue({ el: '#components-work' })

8. How to share the data between components in Vue.js application.

Data flow is useful to share the data between components.

  • Parent Component to Child - Data is passed from a parent component to child component using 'Props'. Props are the custom attributes that you can register on a component and when a values is passed to those props attribute then it becomes a property on that component instance.So when Parent component makes any changes it reflects in child component's prop attribute.
  • Child Component to Parent - Some scenarios may require to communicate back to parent component so to solve this case Vue instances provide the concept of events.
    Parent component can listen to any event on child component using 'v-on' and Child component can emit any event by calling $emit method.
  • Share data across Components - Some scenarios may be required to share the data across all the components. Vuex solves this problem by creating a centralized store for data that is shared across all the components.

9. Describe the slots and scoped slots?

Slots in Vue.js allow to implement a content distribution API, that servers as a distribution outlets for the content. So here content from parent component will fill child component placeholder. Example -

// create a component as below
    <navigation-link url="/myProfile">
        My Profile
    </navigation-link>

    // navigation-link template code
    <a v-bind:href="url" class="nav-link">
    <slot></slot>
    </a>
    //So When your component renders '<slot></slot>' will be replace by 'My Profile' content.
Slots can include any content even any HTML code or other component as well.
Scoped Slots - Sometimes there is a requirement to fill the slot content from data available in child component only. So Scoped slots allow us to achieve this scenario.

10. Explain the v-bind and v-model.

v-bind is a directive that is used to reactively update an HTML attribute as below.

<a v-bind:href="url"></a>
v-model directive is used to create two-way data binding on form elements.

11. How will you create and run your vue.js application?

You can create and run your vue.js application with below steps.

  • First, make sure you have Node.js installed. To check Node.js version run below command.
    node -v and npm -v in command prompt.
  • To install vue CLI run below command.
     npm install -g @vue/cli   
    # OR
    yarn global add @vue/cli
  • To create your vue application use below commands.
    vue create my-app  // follow some steps mention in terminal.
     # OR
    vue ui
  • Go to your application folder with command 'cd my-app'
  • To run you application run the below command.
    npm run serve

12. What is the component Prop?

Component Prop is used to pass the data from parent component to child component. A component can contain as many as props. Prop is a custom attribute and when a value is passed to attribute then it becomes property on that component instance.
A component Prop form a One-way down binding from parent to child component. When any change happens to parent property it flow to child but not child to parent. So when Parent component is updated, all child component will also get updated. So it will allow you not to mutate the prop in child component.

13. Explain the filters.

Filters are used to formate the text in your application. These are used with interpolations and v-bind expressions. Filters can be applied at the end of JavaScript expression followed by the Pipe '|' symbol. Example of filter:


{{ message | makeCapitalize }}
// makeCapitalize is custom filter defined in your component
filters: {
  makeCapitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
You can create global filter by just be defining the filter before creating vue instance.

14. Explain the Vue.js mixins.

Mixins in Vue.js provide a flexible way to reuse the functionalities or code to the Vue instances and components. Mixins are written in a separate file and can be shared across the components over and over.
When a component use the Mixin then options of mixin become the part of component's options means they are merged with component's options.
You can also create Global Mixins, but use with caution as it will affect every Vue.js instance created afterwards.

15. What is the One-Way Data Flow in Vue.js?

One-Way Data Flow - All Props works in one direction means data flow works from parent to child. When any change happens in parent property it automatically updates child property but not vice versa. It prevents child to mutate the parent property state , which can make your application data flow harder to understand.

14. describe the Vuex?

Vuex act as a centralized store for all the components in an application and ensures that the state can be mutated in a predictable way. It's a State Management Pattern plus Library for the applications developed in Vue.js.

15. How will you solve common causes of memory leaks in Vue.js application.

16. Explain the single file component.

Single File components or SFCs are like any other component except that they are self contained in their own files. SFCs come with following advantages.

  • Global Definitions - means all SFCs are registered globally so they have unique names.
  • Strong Templates - you can write the template code easily in SFCs instead of single template property like in other components.
  • CSS Support - SFCs provide to add CSS style to component itself.
  • Preprocessors Support - can easily use preprocessors like babel, SAAS etc in SFCs.

17. What is the Reactivity in Vue.js?

Reactivity - Whenever you made any changes in data value then it triggers page update to reflect data changes. Vue data property, computed property are reactive. Services in Vue.js are not reactive. For more you can visit Reactivity in Vue.js

18. Explain the Vue.js lifecycle hooks.

Every Vue instance passes through certain functions called lifecycle hooks. There are 8 lifecycle hooks for each vue.js instance.

  • Before Create - First lifecycle hook that's called immediately after vue instance has been initialized.
  • Created - It's called just after 'Before create' hook but vue instance has set initial properties, data etc.
  • Before mount - It's called just before the instance is mounted on DOM. At this moment template has compiled.
  • Mounted - It's called once template is ready with data and functional.
  • Before update - It's called when any changes are made to data that required DOM to be updated.
  • Updated - It's called just after DOM has updated.
  • Before destroy It's a place when you can perform resource clean up before destroying the vue instance.
  • destroyed - It's get called when all vue instance has been destroyed. It will be triggered when run the destroy method on object in code.

19. What is the Key in Vue.js?

Key is a special attribute in Vue that is used as a hint for virtual DOM algorithm of Vue to differentiate the VNodes when defining new nodes list against old list.
If 'key' attribute is not used then Vue use an algorithm that minimize element movement and try to reuse the elements of same type. But with 'key' attribute elements will be reordered and the elements without key are destroyed. It's similar of $index in AngularJS. It's mostly used with 'v-for' directive.

<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>

Children of the same parent must have unique keys. Duplicate keys will cause errors while rendering.

20. Explain the difference between v-show and v-if.

v-show and v-if both are used to show or hide the elements. But there are some differences.

  • v-if directive is used to render a block conditionally. it has lazy behavior means if initial condition is false then it will not render the block until the condition becomes true. v-if completely destroy and recreate the elements during condition change.
    It has less initial render cost but high toggle cost so when your condition is not changing frequently at runtime then use v-if directive.
  • v-show directive is also used to render a block conditionally. v-show always render the element it just set the CSS display property instead of destroying the element or block from DOM.
    It has high cost of initial rendering but less cost of toggle, so when you need frequent toggle then use v-show directive.

21. What is $root in Vue.js?

$root property is used to access the root instance (new Vue()) in every subcomponent of this instance. All subcomponents can access this root instance and can use it as a global storage.


// foo will be available globally
this.$root.foo = 2

22. Explain the usage of $parent.

$parent is used to access the parent component instance in child component. It makes the application harder to test and debug and you can not find out from where mutation comes from. Similar to $parent Vue also provide $child that gives child component instance.

23. Describe the ref in Vue.js.

Vue.js provides the concept of props and events to communicate from parent to child and vice versa. Sometimes you need to directly access child component in JavaScript. To achieve this behavior you can use ref attribute to assign a reference ID to the child component as below.

<base-input ref="usernameInput"></base-input>
Now you can access the 'base-input' instance in the component where you have defined 'ref'.
this.$refs.usernameInput

24. How to track the changes in Vue.js?

25. Explain Vue router or how will you implement routing?

26. How will you create constants accessible to entire application in Vue.js?

27. Explain the Vue.js application Structure.

28. What are the limitations of using Vue.js?

29. How to use local storage in Vue.js application?

30. How to deploy Vue.js app?

31. How to pass arguments to filters?

32. How to listen component prop changes?

33. How to force Vue.js application to re-render or reload?

34. What is the equivalent of Angular service in Vue.js?

Vue does not provide the concept of singleton service similar to Angular. It encourage you to use Mixin and Store for your all shared logic. But you can implement your custom stateful services in Vue.js. For more you can visit this Service in Vue.js

35. How to bind the styles in Vue.js?

36. How will you toggle a class in Vue.js?

37. What is the difference between a method and computed value?

38. How to communicate between sibling components in Vue.js?

39. How to redirect to another page in Vue.js?

40. How routing works in Vue.js?

41. How to modify global configurations in Vue.js?

To modify global configuration you need to work with Vue.config object. This object contains all global settings. You can change any setting as per your requirement.


    Vue.config.debug = true // to turn on debugging mode
    Vue.config.delimiters = ['(%', '%)'] // to set delimiters
For more you can visit Vue.js Global API

42. How to handle the errors in Vue.js?

Error handling is very important in any application and there are many ways to implement this.

  • Using errorHandler - It's a generic error handling technique for vue.js application.
    
        Vue.config.errorHandler = function(err, vm, info) {
        console.log(`Error: ${err.toString()}\nInfo: ${info}`);
        }
    
    Here, err is actual error object, vm is Vue instance and info is error string specified.
  • Using warnHandler - It handles Vue warnings and disabled in Production environment.
    
        Vue.config.warnHandler = function(msg, vm, trace) {
        console.log(`Warn: ${msg}\nTrace: ${trace}`);
        }
    
  • Using renderError - It's not a global handler and disabled in Production environment. It handles the error at component level. You need to implement this in your component that show the error on UI.
    
        const app = new Vue({
        el:'#app',
        renderError (h, err) {
        return h('pre', { style: { color: 'red' }}, err.stack)
        }
        })
    
  • Using errorCaptured - It's implemented to capture any error from a descendent component. For more about this visit Handling Errors in Vue.js

43. Explain custom events.

44. What is the Jest and Mocha in Vue CLI.

Vue CLI comes with built-in option for unit testing with Jest and Mocha. Jest is a test runner developed by Facebook. It delivers a battery-included solution for unit testing. You can use Vue CLI plugin 'cli-plugin-unit-jest' to run Jest tests.
Mocha is a JavaScript based test framework runs on Node.js and in browser that makes asynchronous testing easy. It comes with integrated webpack precompiler

Some General Interview Questions for Vue.js

1. How much will you rate your self in Vue.js?

When you attend an interview, Interviewer may ask you to rate your self in specific Technology like Vue.js, So It's depend on your knowledge and work experience in Vue.js.

2. What challenges did you face while working on Vue.js?

This question may be specific to your technology and completely depends on your past work experience. So you need to just explain the challenges you faced related to Vue.js in your Project.

3. What was your role in last Project related to Vue.js?

It's based on your role and responsibilities assigned to you and what functionality you implemented using Vue.js in your project. This question is generally asked in every interview.

4. How much experience do you have in Vue.js?

Here you can tell about your overall work experience on Vue.js.

5. Have you done any Vue.js Certification or Training?

It's depend on candidate like you have done any Vue.js training or certification. Certifications or trainings are not essential but good to have.

Conclusion

We have covered some frequently asked Vue.js Interview Questions and Answers to help you for your Interview. All these Essential Vue.js Interview Questions are targeted for mid level of experienced Professionals and freshers.
While attending any Vue.js Interview if you face any difficulty to answer any question please write to us at info@qfles.com. Our IT Expert team will find the best answer and will update on portal. In case if we find any new Vue.js questions, we will update the same here.

Check it