Vue.js Interview Questions – Set 04

by

What is the VUE-resource? How would you install the Vue-Resource?

The VUE-resource is a plug-in for Vue.js. This plug-in is used with Vue.js to make web requests and handle responses, in which XHMLHttpRequests or JSONP is used.

You can use the following yarn or npm command to install VUE-resource:

$ yarn add vue-resource
$ npm install vue-resource

How many types of the directive are used in Vue.js?

The following types of directives are used in Vue.js:

  • General Directives
  • Literal Directives
  • Empty Directives
  • Custom Directives

How can you create Two-Way Bindings in Vue.js?

The v-model directive is used to create Two-Way Bindings in Vue js. In Two-Way Bindings, data or model binds with DOM, and Dom binds back to the model.

What are the most common cause of memory leaks in Vue.js apps, and how can they be solved?

In Vue.js applications, memory leaks often come from using third-party libraries that create their own instances and/or manipulate the DOM. The v-if directive and the Vue Router destroy Vue component instances. To overcome this issue, do a cleanup action before the component gets destroyed. It should be done manually in the beforeDestroy() lifecycle hook.

For example, suppose we have a fictional library named PowerGraph.js, inside our component. It creates a graph instance that displays some data on the page:

mounted() {
this.chart = new PowerGraph();
}
Here, we have to call the graph instance’s destroy() method or implement our own cleanup method:

beforeDestroy() {
this.chart.destroy();
}
If we don’t do cleanup action before our component gets destroyed, then that memory will never be released, and this will be a memory leak.

Can we call Rest API from Vue.js? How?

Yes, we can call Rest API from Vue.js. There are several HTTP libraries that can used to call REST Api’s from Vue.js. One of the popular libraries is Axios. It is very simple to use and lightweight. You can include it in your project by using the following command.

npm install axios –save
Implementing GET method using Axios in Vue JS
axios({ method: “GET”, “URL”: “https://httpbin.org/ip” }).then(result => {
this.ip = result.data.origin;
}, error => {
console.error(error);
});