Vuejs Interview Questions

1) What is VueJS?

Vue.js is an open-source, progressive Javascript framework for building user interfaces that aim to be incrementally adoptable. The core library of VueJS is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.

2) What are the major features of VueJS?

Below are the some of major features available with VueJS

Virtual DOM: It uses virtual DOM similar to other existing frameworks such as ReactJS, Ember etc. Virtual DOM is a light-weight in-memory tree representation of the original HTML DOM and updated without affecting the original DOM.

Components: Used to create reusable custom elements in VueJS applications.

Templates: VueJS provides HTML based templates that bind the DOM with the Vue instance data

Routing: Navigation between pages is achieved through vue-router

Light weight: VueJS is light weight library compared to other frameworks.

3) What is the difference between v-show and v-if directives?

Below are some of the main differences between between v-show and v-if directives,

1. 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.
2. v-if supports v-else and v-else-if directives whereas v-show doesn’t support else directives.
3. 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.
4. v-if supports <template> tab but v-show doesn’t support.

4) What are the array detection non-mutation methods?

The methods which do not mutate the original array but always return a new array are called non-mutation methods. Below are the list of non-mutation methods,

1. filter()
2. concat()
3. slice()

For example, lets take a todo list where it replaces the old array with new one based on status filter,

vm.todos = vm.todos.filter(function (todo) {
  return todo.status.match(/Completed/)
})

This approach won’t re-render the entire list due to VueJS implementation.

5) What are the possible ways to provide transitions?

There are many ways Vue provides transition effects when items are inserted, updated, or removed from the DOM. Below are the possible ways,

1. Automatically apply classes for CSS transitions and animations
2. Integrate 3rd-party CSS animation libraries. For example, Animate.css
3. Use JavaScript to directly manipulate the DOM during transition hooks
4. Integrate 3rd-party JavaScript animation libraries. For example, Velocity.js

6) What is vue router and their features?

Vue Router is a official routing library for single-page applications designed for use with the Vue.js framework. Below are their features,

1. Nested route/view mapping
2. Modular, component-based router configuration
3. Route params, query, wildcards
4. View transition effects powered by Vue.js’ transition system
5. Fine-grained navigation control
6. Links with automatic active CSS classes
7. HTML5 history mode or hash mode, with auto-fallback in IE9
8. Restore scroll position when going back in history mode

7) Explain Vue.js reactivity and common issues when tracking changes.

All properties defined in a Vue instance’s data option are reactive, meaning that if they change, the component is automatically updated and re-rendered as needed.

All such properties are converted to getters and setters during initialization, thus allowing Vue to detect when those properties are accessed or changed.

The following limitations must be accounted for when designing a Vue app:

• Vue cannot detect object property addition or deletion due to a JavaScript limitation, so the Vue.set method must be used to add new root-level reactive properties.
• Similarly, Vue cannot detect when an array item is modified using an index. Vue.set must be used here as well.

8) What is a single-file component?

A single-file component is a file with a .vue extension that contains a Vue component. It contains the component’s template, logic, and styles all bundled together in one file. It consists of one <script> block, optional <template> and <style> blocks, and possible additional custom blocks.

To use one, you need to set up Vue Loader for parsing the file (usually done as part of a webpack building pipeline). But this then also supports using non-default languages such as Sass or HTML templating languages with pluggable pre-processors.

9) What is the virtual DOM and how is it beneficial?

The virtual DOM is a tree-like data structure (or a collection) of JavaScript objects representing DOM nodes that are managed by Vue.js and that should be rendered on the page. These objects are called “virtual nodes” or VNodes for short.

The main purpose of the virtual DOM is faster and more efficient DOM manipulation. When there are lots of nodes in the DOM, updating them can be expensive in terms of processing power and resources required.

Working with the virtual DOM JavaScript object is significantly faster. Subsequently, Vue.js organizes DOM updates in batches for more efficiency.

 10) How to deploy Vue.js app?

If you’ve created your project like this:

vue init webpack myproject

Now you can run

npm run build

Then copy index.html and /dist/ folder into your website root directory. Done.

11) List some features of Vue.js

Vue js comes with following features

• Templates
• Reactivity
• Components
• Transitions
• Routing

12) What are all the life cycle hooks in Vue instance?

Each Vue instance goes through series of steps when they are created, mounted and destroyed. Along the way, it will also runs functions called life cycle hooks, giving us the opportunity to add our own code at specific stage. Below are the events, a Vue instance goes through.

• beforeCreate — The first hook in the creation hooks. They allow us to perform actions before our component has even been added to the DOM. We do not have access to the DOM inside of this.
• created — This hook can be used to run code after an instance is created. We can access the reactive data. But templates and Virtual DOM have not yet been mounted or rendered.
• beforeMount — The beforeMount hook runs right before the initial render happens and after the template or render functions have been compiled. Most likely we’ll never need to use this hook.
• mounted — We will have full access to the reactive component, templates, and rendered DOM. This is the most frequently used hook.
• beforeUpdate — This hook runs after data changes on our component and the update cycle begins. But runs right before the DOM is patched and re-rendered.
• updated — This hook runs after data changes on our component and the DOM re-renders. If we need to access the DOM after a property change, here is probably the safest place to do it.
• beforeDestroy — This hook will run right before tearing down the instance. If we need to clean up events or reactive subscriptions, this is the right place to do it.
• destroyed — This hook will be used to do any last minute clean up.

13) What is the role of ref in Vue.js?

Despite the existence of props and events, sometimes if we still need to directly access a child component, we can assign a reference ID to the child component using the ref attribute. For example:

<base-input ref=”InputName”></base-input>

Now in the component where we have defined this ref, we can use:

this.$reft.userName

$refs are only populated after the component has been rendered, and they are not reactive. Hence we should avoid accessing $refs from within templates or computed properties.

14) What is Vue Router?

Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js easy to implement. Its features include:

• Nested route/view mapping
• Modular, component-based router configuration
• Route params, query, wildcards
• View transition effects powered by Vue.js’ transition system
• Fine-grained navigation control
• Links with automatic active CSS classes
• Customizable Scroll Behavior
• HTML5 history mode or hash mode, with auto-fallback in IE9

15) How can you redirect to another page in Vue.js?

If you are using vue-router, you should use router.go(path) to navigate to any particular route. The router can be accessed from within a component using this.$router. router.go() changed in VueJS 2.0. You can use router.push({ name: "yourroutename"})or just router.push("yourroutename") now to redirect.

16) What are the problems solved by Single File Components?

The Single File Components solve the common problems occurred in a javascript driven application with a .vue extension. The list of issues are,

1. Global definitions force unique names for every component
2. String templates lack syntax highlighting and require ugly slashes for multiline HTML
3. No CSS support means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out
4. No build step restricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) and Babel.

17) How To Use Ternary In Vue Js ?

<div class=”class1″  v-bind: class=”{‘class2’: (!variable)}”></div>

18) How To Check Response Data Length In Vue Js?

axios.get(url)

.then(function (response) {   

console.log(response.data.length);  

})

.catch(function (error) { 

});

19) How To Set Cache False And Content-type In Vue Axios?

var config = { headers: {‘Content-Type’: ‘application/json’,’Cache-Control’ : ‘no-cache’}};

axios.get (‘/post’,config)

.then (function (response) { })

.catch (function (error) { });

20) How do you use mixins in CLI?

Using Vue CLI, mixins can be specified anywhere in the project folder but preferably within /src/mixins for ease of access. Once these mixins are created in a .js file and exposed with the export keyword, they can be imported in any component with the import keyword and their file paths.