Vue JS Interview Questions and Answers
Question - 41 : - How to create Constants in Vue js.
Answer - 41 : -
To create constant const keyword is used.In Vue.js we suggest to create a seperate file for defining your consants.
Example:
Creating a Constant in Vue js.
export const SITE_URL = 'https://www.onlineinterviewquestions.com';
Importing a Constant in Vue js.
import {SITE_URL} from './path/to/constants.js';
Question - 42 : - What is virtual dom in Vuejs?
Answer - 42 : -
Virtual DOM in Vue is a JavaScript object that represents the Document Object Model (DOM). The application updates the Virtual DOM instead of the DOM directly. So, it minimizes the updating cost of the real DOM as it is computationally expensive. Virtual DOM offers the ability to control the timing at which the Virtual DOM is rendered. Virtual DOM will just maintain the state of the data without re-rendering until you choose it. Virtual DOM also offers the ability to optimize the performance of your web applications by minimizing the number of times the DOM has to be updated.
Question - 43 : - Why we need Vue.js mixins?
Answer - 43 : -
Mixins in Vue JS are a chunk of defined logic that is stored in a particular way. It can be re-used over and over to add functionality to your Vue instances and components. It is important that we need Vue JS because,
- You can easily adhere to the DRY principle with mixins. It ensures that you do not repeat yourself.
- You get a lot of flexibility with mixins. Mixin contains options for Vue components.
- Mixins are safe and they do not affect changes outside their defined scope.
- Mixins in Vue JS are a great platform for code reusability.
Question - 44 : - What are filters in Vuejs?
Answer - 44 : -
Filters in Vue JS helps in applying common text formatting. It is used in two places, mustache interpolations, and v-bind expressions. It mainly filters the data on the DOM level. So you get data that is still intact in the storage but is represented in the custom specified manner. It enhances the presentation of the view layer. The filters are also reusable. You can declare a filter globally and use it on any desirable component. It gives you the power to format your data at the view level.
Question - 45 : - How to create a component in Vue js?
Answer - 45 : -
Components in Vue JS are a single, independent unit of an interface. They have their own state, markup, and style.
A Vue component can be defined in four ways.
- The first is new Vue({ /*options */ }).
- The second is Vue.component(‘component-name’, { /* options */ }).
- The third way is by using the local components.
- The fourth is in the .vue files or Single File Components.
The first two ways are the standard ways to use Vue when building an application that is not a SPA (Single Page Application). The Single File Components are uses in the Single Page Application.
Question - 46 : - How to import js file in the Vue component?
Answer - 46 : -
There are two ways to import a JavaScript library to the Vue Component.
The first is to import a local JavaScript library. Here, you can import the JavaScript library by using the 'import' keyword inside the script tag of your Vue file.
import * as mykey from '../assets/js/mykey.js';
The second way is to include your external JavaScript file into the mounted hook of your Vue component.
Question - 47 : - How to call rest API from Vue js?
Answer - 47 : -
We can use various HTTP libraries to call REST Api's from Vue JS. One of the popular libraries is Axios. It simple to use and lightweight. To include it in your project, execute 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);
});
We can send an HTTP request using Axios with a promise. If the request is successful, we’ll get the result.
Question - 48 : - What is the difference between v-show and v-if directives?
Answer - 48 : -
Below are some of the main differences between v-show and v-if directives,
- v-if only renders the element to the DOM if the expression passes whereas v-show renders all elements to the DOM and then uses the CSS display property to show/hide elements based on expression.
- v-if supports v-else and v-else-if directives whereas v-show doesn't support else directives.
- v-if has higher toggle costs while v-show has higher initial render costs. i.e, v-show has a performance advantage if the elements are switched on and off frequently, while the v-if has the advantage when it comes to initial render time.
- v-if supports tab but v-show doesn't support.
Question - 49 : - What is vue instance?
Answer - 49 : -
Every Vue application works by creating a new Vue instance with the Vue function. Generally the variable vm (short for ViewModel) is used to refer Vue instance. You can create vue instance as below,
var vm = new Vue({
// options
})
As mentioned in the above code snippets, you need to pass options object. You can find the full list of options in the API reference.
Question - 50 : - How do you achieve conditional group of elements?
Answer - 50 : -
You can achieve conditional group of elements(toggle multiple elements at a time) by applying v-if directive on element which works as invisible wrapper(no rendering) for group of elements.
For example, you can conditionally group user details based on valid user condition.
Name