Vue JS Interview Questions and Answers

Answer - 11 : - Mixins in Vue.js are a set of defined logic that is stored in a particular way. Mixins can be re-used repeatedly to add functionality to your Vue instances and components. Mixins are important because they provide a lot of functionalities. Following is the list of features that Mixins provide: o Mixins facilitate you to easily adhere to the DRY principle and ensure that you do not repeat yourself. o Mixins provide great flexibility. o Mixin contains options for Vue components. o You can use Mixins in Vue.js safely because they do not affect changes outside their defined scope. o Mixins in Vue.js provide a great platform for code reusability.

Answer - 12 : - VueX is a state management pattern and library for the Vue.js application. It is used as a centralized store for all the different components in the Vue.js application. Vuex provides some rules to ensure that the state can only be mutated in a predictable fashion. You can get a lot of additional features by integrating Vuex with the official devtool extension of Vue.js.

Answer - 13 : - 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.

Answer - 14 : - Following is the list of main usages of filters in Vue.js: o 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. o Filters are used to enhance the presentation of the view layer. o The filters are also reusable. o You can declare a filter globally and use it on any desirable component. o Filters facilitate you to format your data at the view level.

Answer - 15 : - You can create a project by using the following command: 1. vue init webpack myproject To run your project, run the following command: 1. npm run build After executing the above command, copy index.html and /dist/ folder into your website root directory, and your project will be deployed.

Answer - 16 : - The Vue-loader is a loader module for webpack in Vue.js that is used to write single file components using the .vue file format. The single-file component contains three sections called template, script, and style. The webpack can extract and process each section using separate loader modules such as the SASS or SCSS loaders. The vue-loader module makes static assets to be treated as module dependencies and enables processing using webpack loaders.

Answer - 17 : - What are the most commonly used Directives in Vue.js? Following is the list of most commonly used directives in Vue.js: o v-show o v-if o v-model o v-else o v-on

Answer - 18 : - To render DOM elements more efficiently, Vue.js reuses the elements instead of creating a new element every time. The key is a kind of flag that tells Vue "if the data associated with this child component is moved somewhere else, then move the component along with it to preserve the changes that already exist."

Answer - 19 : - 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).

Answer - 20 : - The following types of directives are used in Vue.js: o General Directives o Literal Directives o Empty Directives o Custom Directives