Vue.js Interview Questions – Set 03

by

Name some websites which are using Vue.js?

Following is the list of some websites using Vue.js on parts of their projects and applications:

  • Grammarly
  • Netflix
  • Adobe
  • Facebook
  • Laracast
  • Behance
  • Gitlab
  • Euronews
  • Codeship
  • Livestorm
  • Xiaomi
  • Alibaba
  • Wizzair etc.

What is $child property in Vue.js?

In Vue.js, the $child property is just like $parent property, but it is used to access the child instance.

What are filters in Vue.js?

The Filters are functionality provided by Vue.js components that allow you to apply formatting and transformations to your dynamic template data. Filters are used in two places, mustache interpolations, and v-bind expressions. Filters don’t change a component data or anything, but they only affect the output.

What is the virtual DOM in Vue.js?

In Vue.js, the virtual DOM is a tree-like data structure or a collection of JavaScript objects that represents DOM nodes. Vue.js manage the nodes of the virtual DOM, and that should be rendered on the page. These objects are called “virtual nodes” or VNodes.

Who is the founder/ inventor of Vue.js?

Evan you is the founder of Vue.js. He was working at Google on several Angular projects when he founded Vue.js.

Why is it recommended not to use v-if and v-for directives together on the same element in Vue.js?

It is recommended not to use v-if and v-for directives together on the same element because the v-for directive has a higher priority than v-if directive. If you use both directives together, then there are two common cases where this may be tempting:

  1. When you have to filter items in a list (e.g. v-for=”user in users” v-if=”user.isActive”). In these cases, replace users with a new computed property that returns your filtered list (e.g., activeUsers).
  2. To avoid rendering a list if it should be hidden (e.g. v-for=”user in users” v-if=”shouldShowUsers”). In these cases, move the v-if to a container element (e.g., ul, ol).

What is the difference between one-way data flow/ or one-way data binding and two-way data binding?

In one-way data binding or one-way data flow, the view (UI) part of the application does not update automatically. In this model, when the data Model is changed, you need to write some custom code to make it updated every time after the change. The v-bind directive is used for one-way data flow or binding in Vue.js.

On the other hand, in two-way data binding, the view (UI) part of the application is automatically updated when the data Model is changed. The v-model directive is used for two way data binding in Vue.js.

What is the usage of ref in Vue.js?

The ref if an attribute that is used to access a component directly. Despite having the props and events, if you want to access a child component directly, you can assign a reference ID to the child component using the ref attribute.

Example:

Now you can use this.$refs.usernameInput where we have to define this ref in the component.

You should avoid accessing $refs from within templates or computed properties because $refs are only populated after the component has been rendered, and they are not reactive.

What are the main usages of filters in Vue.js?

Following is the list of main usages of filters in Vue.js:

  • Filters are mainly used to filter the data on the DOM level to provide you the data that is still intact in the storage but is represented in the custom specified manner.
  • Filters are used to enhance the presentation of the view layer.
  • The filters are also reusable.
  • You can declare a filter globally and use it on any desirable component.
  • Filters facilitate you to format your data at the view level.

What is the main purpose of using virtual DOM in Vue.js? / What is the benefit of using virtual DOM in Vue.js?

The virtual DOM’s main purpose is to make DOM manipulation faster and more efficient. It becomes very crucial when you have a lot of nodes in your DOM. In this case, updating these nodes is a very expensive task for processing power and resources required. Here, virtual DOM comes into action and makes JavaScript object significantly faster. Vue.js automatically organizes DOM updates in batches to enhance efficiency.