Vue.js Interview Questions

Even though VueJS and ReactJS share few common features there are many difference between them.

Let's list down them in a table format.

Vue has the following advantages over React

1. Vue is smaller and faster
2. The convenient templates ease the process of developing
3. It has simpler javascript syntax without learning JSX

React has the following advantages over Vue

1. ReactJS gives more flexibility in large apps developing
2. Easy to test
3. Well-suited for mobile apps creation
4. The eco system is quite big and well matured.

The the syntax of Vue and Angular is common at some points because Angular is the basis for VueJS development in the beginning.

But there are many differences between VueJS and Angular as listed,

The dynamic component will allow you to dynamically switch between multiple components without updating the route of the application and even retaining the state of the component when switching back to the initial component. It works by using <component> tag with v-bind:is attribute which accept dynamic component.

Let's create a dynamic component vue instance to switch between different pages of a website,

new Vue({
el: '#app',
data: {
currentPage: 'home'
},
components: {
home: {
template: "<p>Home</p>"
},
about: {
template: "<p>About</p>"
},
contact: {
template: "<p>Contact</p>"
}
}
})

Now you can use the dynamic component which holds the current page,

<component v-bind:is="currentPage">
<!-- component changes when currentPage changes! -->
<!-- output: Home -->
</component>

The component will be unmounted when it is switched away but it is possible to force the inactive component alive using <keep-alive> component

Note: The value of :is attribute can be either name of the registered component or the actual imported object itself.

Keep-alive tag is an abstract component used to preserve component state or avoid re-rendering. When you wrapped < keep-alive> tag around a dynamic component, it caches the inactive component instances without destroying them.

Let's see the example usage of it,

<!-- Inactive components will be cached! -->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>

When there are multiple conditional children, it requires that only one child is rendered at a time.

<!-- multiple conditional children -->
<keep-alive>
<comp-a v-if="a > 1"></comp-a>
<comp-b v-else></comp-b>
</keep-alive>

Note: Remember that keep-alive tag doesn't render a DOM element itself, and doesn't show up in the component parent chain.

In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make this happen, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. These components are known as async component.

Let's see an example of async component using webpack code-splitting feature,

Vue.component('async-webpack-example', function (resolve, reject) {
// Webpack automatically split your built code into bundles which are loaded over Ajax requests.
require(['./my-async-component'], resolve)
})

Vue will only trigger the factory function when the component needs to be rendered and will cache the result for future re-renders.

Async component factory is useful to resolve the component asynchronously. The async component factory can return an object of the below format.

const AsyncComponent = () => ({
// The component to load (should be a Promise)
component: import('./MyComponent.vue'),
// A component to use while the async component is loading
loading: LoadingComponent,
// A component to use if the load fails
error: ErrorComponent,
// Delay before showing the loading component. Default: 200ms.
delay: 200,
// The error component will be displayed if a timeout is
// provided and exceeded. Default: Infinity.
timeout: 3000
})

If you keep an inline-template on a child component then it will use its inner content as a template instead of treating as reusable independent content.

<my-component inline-template>
<h1>Inline templates</h1>
</my-component>

Note: Even though this inline-templates gives more flexibility for template authoring, it is recommended to define template using template property or <template> tag inside .vue component.

Apart from regular templates and inline templates, you can also define templates using a script element with the type text/x-template and then referencing the template by an id.

Let's create a x-template for simple use case as below,

<script type="text/x-template" id="script-template">
</script>

Now you can define the template using reference id,

Vue.component('x-template-example', {
template: '#script-template'
})

The Components that can recursively invoke themselves in their own template are known as recursive components.

Vue.component('recursive-component', {
template: `<!--Invoking myself!-->
<recursive-component></recursive-component>`
});

Recursive components are useful for displaying comments on a blog, nested menus, or basically anything where the parent and child are the same, eventhough with different content.

Note: Remember that recursive component can lead infinite loops with max stack size exceeded error, so make sure recursive invocation is conditional(for example, v-if directive).

In complex applications, vue components will actually be each other's descendent and ancestor in the render tree.

Let's say componentA and componentB included in their respective templates which makes circular dependency,

//ComponentA
<component-b >

//ComponentB
<component-a >

This can be solved by either registering(or wait until) the child component in beforeCreate hook or using webpack's asynchronous import while registering the component,

Solution1:

beforeCreate: function () {
 this.$options.components.componentB = require('./component-b.vue').default
}

Solution2:

components: {
 componentB: () => import('./component-b.vue')
}

Some environments(Google Chrome Apps) prohibits the usage of new Function() for evaluating expressions and the full builds of vue applications depends on this feature to compile templates. Due to this reason, the full builds of VueJS application are not CSP complaint.

In this case you can use runtime-only builds with Webpack + vue-loader or Browserify + vueify technology stack through which templates will be precompiled into render functions. This way you can make sure VueJS applications are 100% CSP complaint.

There are two types of builds provided by VueJS,

1. Full: These are the builds that contain both the compiler and the runtime.

2. Runtime Only: These builds doesn't include compiler but the code is responsible for creating Vue instances, rendering and patching virtual DOM. These are about 6KB lighter min+gzip.

Below are the list of different builds of VueJS based on type of build,