10 Quick-Fire Vue Interview Questions

If you are preparing for a Vue.js interview, then these are 10 quick-fire questions that you should be prepared to answer.

1. What is Vue.js?

Vue.js is frontend JavaScript framework for building user interfaces with a focus on single-page applications. It promotes “high decoupling” which makes it really easy for developers to create user interfaces and rapid prototyping.

2. What are the benefits of Vue.js?

Vue.js is lightweight and therefore highly performant. It is developer-friendly, hence easy to learn. It is highly flexible and has great tooling.

3. What is a Vue instance?

The Vue instance, often referred to as vm in a Vue application is the ViewModel of the MVVM pattern that Vue follows. The Vue instance is the root of a Vue application.

new Vue({
  render: h => h(App),
}).$mount(‘#app’)

A new Vue instance is created and mounted to an HTML element that contains the id #app.

4. What are the differences between v-if and v-show?

v-if will not render the element in the DOM if the expression evaluates to false. In the case of v-show, it will render the element in the DOM no matter what, but will be hidden if false. v-if supports v-else and v-else-if and can be used inside the <template> element, v-show does not support this.

5. What are Vue components?

Vue components are reusable Vue instances that have a name. They support the same properties as the root Vue instance such as data, methods, computed, watch, mixins, as well as the lifecycle methods (small variations to how it’s written in a component). Below is an example of a Vue component.

<template>
  <div>
    <p>{{ name }}</p>
  </div>
</template><script>
export default {
  name: ‘10 Quick-Fire Vue Interview Questions’
}
</script><style scoped>
p {
  padding: 10px;
  font-size: 30px;
}
</style>

6. What is the difference between registering a component locally and globally?

Registering a component globally allows them to be [re]used throughout the application, even within other components. Local components can only be used in the component that it was registered in.

You can register a component globally using Vue.component(name, componentData) and register a component locally by adding the it to the components property of the component you want to add it to.

7. What are props?

Props are custom attributes that you can register to a component. When passed from another component or the root Vue instance, the prop becomes a property of the component you passed it to. You can specify multiple props and define their type as well.

Vue.component('myComponent', {
  props: ['name'],
  // OR
  // props: { name: String },
  template: '<div>Hello {{ name }}</div>'
})<my-component name="Giuseppe Campanelli"></my-component>

8. How do you implement two-way binding?

You can achieve two-way binding by specifying the v-model property on the input element. This will make sure that as the element value changes, so will the Vue data property. And if the data property changes, so will the value in the input field.

<input type="text" v-model="firstName">
<p>Hello {{ firstName }}</p>

In this example, if firstName is changed via input or method, the change will be reflected in the on both.

9. What are mixins?

Mixins are a flexible way that enable function distribution among components. A mixin can contains any option found in a component. When a component references one or more mixins, the options of the mixin will be “mixed” into the component.

In the case of data conflicts, the components data property will take precedence. The same goes for methods, components, directives. As for lifecycle hooks of the same name, both will be merged into an array in which the mixin hook will be called before the component hook.

var mixin = {
  data: function () {
    return {
      message: 'hello from mixin'
    }
  },
  created: function () {
    console.log('mixin hook called ')
  }
}new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'hello from component'
    }
  },
  created: function () {
    console.log('component hook called')
  }
})

In this example, the message data property from the component will take precedence and be used over that of the one in the mixin. In the case of the created lifecycle hook, the one in the mixin will be called first, followed by the one in the component.

Note: Applying a mixin globally will affect every Vue instance.

10. What is the Vue Router?

Vue Router is the official router of Vue.js for creating pages with different routes. It supports nested routing, view mapping, and is highly configurable; route params, queries, wildcards.

Conclusion

Hopefully these questions have prepared you for an upcoming interview on Vue. Stay tuned for Part 2!