All Interviews

Top 51 Vue.js Interview Questions and Answers

09/June/2021 | 20 minutes to read

js

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 basic, advanced and latest Vue.js questions will help you to clear your next Job interview.

---

Vue.js Interview Questions and Answers

These interview questions are targeted for Vue.js that's a JavaScript based framework and used to implement SPAs. You must know the answers of these frequently asked Vue.js interview questions to clear an interview.

---

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 depends on its size. Vue.js has a very small size around 18 to 22 KB that can be easily downloaded and used.
• Easy to Understand - Vue.js provides a very simple structure so it can be used in both small and larger projects in an easy way.
• Easy Integration - Vue.js 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 concept makes it easier to the developers of React, Angular and other JavaScript backgrounds.
• Two-Way Communication - Vue.js supports MVVM architecture partially and provides 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.js supports both one-way and two-way data binding options.
One-way Binding - It's the 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 JavaScript 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 the MVVM pattern. That is the reason it's instance is sometimes referred to 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 in Vue.js.

Both are used for binding.

• Interpolation is the 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.js 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.js instances that can be reused. Component has a name, with that a component can be used as a 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 value 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 the child component's prop attribute.
• Child Component to Parent - Some scenarios may require communicating back to parent component so to solve this case Vue instances provide the concept of events.
  Parent component can listen to any event on the child component using 'v-on' and Child component can emit any event by calling the $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 serves as a distribution outlet for the content. So here content from the parent component will fill the 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 the 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 the 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 mentioned in the terminal.
   # OR
  vue ui

• Go to your application folder with command 'cd my-app'
• To run your 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 forms a One-way down binding from parent to child component. When any change happens to parent property it flows to child but not child to parent. So when Parent component is updated, all child components will also get updated. So it will allow you not to mutate the prop in the child component.

13. Explain the filters.

Filters are used to format 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 a global filter by just 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 uses 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 them 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 work 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 a child from mutating the parent property state, which can make your application data flow harder to understand.

16. Describe the Vuex?

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

17. How will you solve common causes of memory leaks in Vue.js applications?

18. 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 the 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 a single template property like in other components.
• CSS Support - SFCs provide support to add CSS style to the component itself.
• Preprocessors Support - can easily use preprocessors like babel, SAAS etc in SFCs.

19. What is Reactivity in Vue.js?

Reactivity - Whenever you make 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

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

21. What is the Key in Vue.js?

Key is a special attribute in Vue that is used as a hint for the virtual DOM algorithm of Vue to differentiate the VNodes when defining a new node list against an old list.
If the 'key' attribute is not used then Vue uses an algorithm that minimizes element movement and tries to reuse the elements of the same type. But with 'key' attribute elements will be reordered and the elements without key are destroyed. It's similar to $index in AngularJS. It's mostly used with the '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.

22. 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 meaning if the 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 renders the element. It just sets 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.

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

24. Explain the usage of $parent.

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

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

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

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

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

29. Explain the Vue.js application Structure.

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

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

32. How to deploy Vue.js app?

33. How to pass arguments to filters?

34. How to listen to component prop changes?

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

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

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

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

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

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

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

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

42. How routing works in Vue.js?

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

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

Error handling is a very important part of any application. Vue.js provides many ways to implement error handling.

• 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 the 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 the Production environment. It handles the error at component level. You need to implement this in your component that shows 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

45. Explain custom events in Vue.js.

46. What is the Jest and Mocha in Vue CLI?

Vue CLI comes with built-in options 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 that runs on Node.js and in browsers that makes asynchronous testing easy. It comes with an integrated webpack precompiler.

Some General Interview Questions for Vue.js

1. How much will you rate yourself in Vue.js?

When you attend an interview, Interviewer may ask you to rate yourself in a 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 the 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 depends on the candidate whether you have done any Vue.js training or certification. Certifications or training 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 the portal. In case we find any new Vue.js questions, we will update the same here.