Vue.js Interview Questions | Freshers & Experienced

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.

Which is better:

Advantages of Vue.js:

• Size: One of the most popular features of Vue.js is its small size. We can’t talk about other features without first mentioning it. Its size is just 18kb after gzipping. Moreover, the entire vue.js ecosystem is also small and fast which means you have the best speed parameters by choosing it. Thanks to its size! Nowadays, it is continuously beating bulky frameworks like Ember.js and Angular.js.
• Data Binding: We know that data binding between HTML and JavaScript code has never been easier. But Vue.js conquer on this problem and handles two-way reactive data-binding as an enchant. It is solved by changing the DOM whenever data is changed. This is perfect for any real-time applications as well for SPA's.
• Components and their Integration: The best thing about Vue.js is the integration of the components and views into existing apps, without leaving any negative impact on the entire system. Therefore, it is very easy to change the existing template by just adding small reactive components. Along with this, it also has the feature to add component's structure, style, and logic in one file which can be reused in other projects too. Also, you can build a SPA (Single Page Applications) in a fly with the help of Vue-router and Views.
• Documentation: Vue.js has very well-written and extensive documentation which developers find very useful to learn it. The native developers should have a basic knowledge of HTML and JavaScript to write their first app. This means, even freshers can handle complicated operations with limited resources and having a little knowledge.
• Flexibility: If you want to design a quick app which can also be controlled from the browser, then Vue.js is the best option for you. You can also handle more complicated apps with the help of JSX, Es6, routing and bundling features that Vue.js supports. Thus, it is obvious for the developers to switch to Vue.js from React, Angular and a JavaScript framework as with the same design, they would find Vue.js more flexible.
• Readability: Any developer always tries to choose the framework which is easy to understand and read. For this reason, programmers can blindly pick upVue.js. Its syntax is very simple, clear and concrete. After getting experience in vue.js, you will find that its structure becomes your second nature. Due to its simple structure, programmers find very easy to locate any error in the blocks.

Disadvantages of Vue.js:

• Small Community: Due to the new and evolving framework, Vue doesn't have wide support of followers like React and Angular frameworks. It is less popular than its fellow frameworks.
• Language Barrier: The creator of Vue id Chinese-American who is very supportive of the Chinese development community. Most of the code is written in Chinese, therefore, it is very difficult for English developers to cope with Vue.js. As it is evolving at a fast pace, so most videos available online are outdated. This means you must have the patience to find the solution if you stuck somewhere in a project.
• Plugins missing: As Vue is still in a development phase, so many important plugins are not present. That's why the developers have to switch to other frameworks for support.
• Too Flexible: Being too flexible can be problematic when working on a large project. Sometimes, over flexibility create more complications in the project that led to errors and irregularities in the code. This increase the time as well as development cost