Vue Js interview questions

Vue is a progressive framework for building user interfaces and one-page applications. Apart from this, Vue. js is also used both for desktop and mobile app development with the Electron framework.

The major features of Vue.js are:

• Virtual DOM
• Data Binding
• Components
• Event Handling
• Animation/Transition
• Computed Properties
• Templates
• Directives

A Vue instance is also known as root Vue Instance is a ViewModel as defined in the MVVM pattern. It is created to add all the properties found in its data object to Vue's reactivity system.

Vue Router is the official router for Vue.js that deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze.

We can create a new Vue instance by using the Vue function and the Vue instance gets activated by default in the main.js file. Vue instance is also called a root Vue Instance and the syntax is : var vm = new Vue({ // options })

The v-bind directive is used for one-way data flow or binding in Vue. js that means the data flows in a single direction so that whenever the data changes in a component, it also updates the view . Whereas in two-way data binding, the view (UI) part of the application is automatically updated when the data Model is changed.

Two-Way Bindings is created by using the v-model directive in Vue.js.

v-if - Only renders the element to the DOM if the expression passes and in v-if the condition doesn't change often.

v-show - Renders all elements to the DOM and then uses the CSS display property to hide elements if the expression fails.

The $parent property is like $root that can be used only for accessing the parent instance from a child.

Directives are tiny commands that you can attach to DOM elements. These are instructions for VueJS in order to do things in a certain way. Some of the built-in directive in VueJS are v-if, v-show, v-else, v-for, v-bind , v-model, v-on, etc.

Refs are Vue. js instance properties that are used to register or indicate a reference to HTML elements or child elements in the template of your application such that it enables you to reference that element or even a child element in your Vue instance.

In Vue.js filters are used to apply common text formatting.

Key modifiers are one of the categories of event modifiers that can be used with keyboard events.

In Vue.Js props are custom attributes you can register on a component such that when a value is passed to a prop attribute, it becomes a property on that component instance.

Plugins usually add global-level functionality to Vue which means it is used to add global features to your app.

Props are used to pass down state-to-child components basically props are the way components can accept data from components that include them.

Slots are reserved space offered by vuejs to display content passed down from one component to another.

A nested root is consist of nested paths that start with / will be treated as a root path. This allows you to leverage the component nesting without having to use a nested URL.

Once you apply a mixin globally, it will affect every Vue instance created afterward. When used properly, this can be used to inject processing logic for custom options: // inject a handler for `myOption` custom option Vue. mixin({ created: function () { var myOption = this.}

An async component can render its state in a meaningful way like any other component, or be logic-only. Rather than loading data high up in your application and passing it down to a component for display, you perform the data loading at the component level.

Vuex is a state management pattern + library for Vue. js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

You can redirect from one page to another page in Vue.js by adding a new object with two properties paths and redirect to our routes array.

We can create a custom filter in Vue.js by creating a function within Vue.filter(); This method registers it globally as most filters you may want to access throughout your project.

Vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File.

Different types of Directives available in Vuejs are:

• v-text.
• v-once.
• v-html.
• v-bind.
• Two-way binding using v-model.
• Using expressions.
• Conditionals.
• Loops.

vue-resource is the plugin for Vue.js that provides services for making web requests and handle responses using an XMLHttpRequest or JSONP. You can install vue-resource via yarn or NPM.

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

A functional component is a component that holds no state and no instance that means the component does not support reactivity and cannot make a reference to itself through this keyword. Functional Component with Vue Template.

X-templates is the method in which your template is defined inside a script tag in the index.html file. The script tag is given the type text/x-template and referenced by id in your component definition.

Webpack is a module bundler that takes your development assets such as Vue components and plain Javascript files and combines them into so-called bundles. You can configure webpack in Vuejs as the entry is the app. js file which is located at the root of your project folder. The next step is to include the loaders with some defined rules. The final step is to add the loaded plugins to our webpack.

Devtools is a set of utility tools that help a developer in developing applications. The dev tools that can be used with Vue are:

• Vue CLI
• 2 Bit for Vue
• NuxtJS
• Vuex
• Vue-router
• Vuetify
• Axios
• Vue Apollo.

The browser supported by VueJS are:

• The Chromium (Chrome, Edge Insider) - Supported
• Edge - Supported
• Firefox - Supported
• Safari 10+ - Supported
• IE11/Safari 9 - Supported with polyfill

Enabling Hot reloading will let you edit a *. vue file, all instances of that component will be swapped in without reloading the page. It even preserves the current state of your app and these swapped components!

Include vuex after Vue and it will install itself automatically:
npm install vuex --save.

mapState is a helper in Vuex which makes it easy to map your state to computed properties within your components.

Vuex getters are equivalent to Vue's computed properties in that they both are reactive to changes in dependencies and cached for improved performance.

There are 7 ways to write for loops in your template code.

• Always use keys in Vue v-for loops
• Using v-for to loop over a range
• Avoid use v-if in loops
• Use computed properties or a method instead
• Or surround your loop with a wrapper element
• Access the index in your loop
• Iterating over an object.