Vue.js Interview Questions

You can configure vueJS in webpack using alias as below,

module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}

The compiler is is responsible for compiling template strings into JavaScript render functions.

For example, the below code snippet shows the difference of templates which need compiler and not,

// this requires the compiler
new Vue({
template: '<div>{{ message }}</div>'
})

// this does not
new Vue({
render (h) {
return h('div', this.message)
}
})

DevTools is a browser extension allowing you to inspect and debug your Vue applications in a more user-friendly interface. You can find the below extensions for different browsers or environments,

1. Chrome Extension
2. Firefox Addon
3. Standalone Electron app (works with any environment)

The DevTools plugins can be used as shown in the below snapshot,

Note:

1. If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up.
2. To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.

It supports all ECMAScript5 complaint browsers as mentioned in this url. VueJS doesn't support IE8 browser and below, because it uses ECMAScript 5 features that are un-shimmable(require support from the underlying JS engine) in IE8.

VueJS is available in jsdelivr, unpkg and cdnjs etc CDNs. Normally you can use them for prototyping or learning purposes.

For example, you can use them using jsdelivr with latest versions as below,

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>

You can use it for native ES modules as below,

<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.esm.browser.js'
</script>

Note: You can remove version number to get latest version.

It is extremely rare situation of having to manually force an update despite the fact that no reactive data has changed. i.e, To force the Vue instance to re-render manually. You can do it force update using **vm.$forceUpdate() ** API method.

Note: It does not affect all child components but only the instance itself and child components with inserted slot content.

If you want to render a lot of static content then you need to make sure it only evaluated once and then cached thereafter. In this case, you can use v-once directive by wrapping at the root level.

The example usage of v-once directive would be as below,

Vue.component('legal-terms', {
template: `
<h1>Legal Terms</h1>
... a lot of static content goes here...
`
})

Note: It is recommended not to overuse unless there is slow rendering due to lot of static content.

The root instance(new Vue()) can be accessed with the $root property.

Let's see the usage of root instance with an example.

First let's create a root instance with properties and methods as below,

// The root Vue instance
new Vue({
data: {
age: 26
},
computed: {
fullName: function () { /* ... */ }
},
methods: {
interest: function () { /* ... */ }
}
})

Now you can access root instance data and it's methods with in subcomponents as below,

// Get root data
this.$root.age

// Set root data
this.$root.age = 29

// Access root computed properties
this.$root.fullName

// Call root methods
this.$root.interest()

It is recommend using Vuex to manage state instead of using root instance as a global store.

Below are the top 10 organizations using VueJS for their applications or products,

1. Facebook - Used on marketing side of its Newsfeed
2. Netflix - Used in two internal apps for building movie streaming interfaces
3. Adobe - Used for Portfolio, a custom website builder designed to help users showcase their creative work
4. Xiaomi - Used for products where it sells from consumer electronics to software
5. Alibaba - Provide their apps an excellent experience to its customers
6. WizzAir - A budget airline WizzAir used for their customers user interface
7. EuroNews
8. Laracasts
9. GitLab
10. BMW

When the default render function encounters an error then you can use rennderError as an alternative render output. The error will be passed to renderError as the second argument.

The example usage of renderError is as below,

new Vue({
render (h) {
throw new Error('An error')
},
renderError (h, err) {
return h('div', { style: { color: 'red' }}, err.stack)
}
}).$mount('#app')

The $parent object refers to the immediate outer scope. The parent will be accessible as this.$parent for the child, and the child will be pushed into the parent's $children array. It establishes a parent-child relationship between the two instances(parent and child). You can access parent data and properties similar to $root.

Vuex is a state management pattern + library (Flux-inspired Application Architecture) 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.

The state management has state, view and actions as major components. The pattern followed by these components in a application is known as State Management Pattern. Below are the components in a detail,

1. The state, which is the source of truth that drives our app
2. The view, which is just a declarative mapping of the state
3. The actions, which are the possible ways the state could change in reaction to user inputs from the view.

Let us take a counter example which follows state management pattern with the above 3 components,

new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
`,
// actions
methods: {
increment () {
this.count++
}
}
})

Vue.js has a one-way data flow model, through the props property. The same concept can be represented in vuex has below,

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

For example, it authors HelloWorld component in a SFC,

<template>
</template>

<script>
export default {
data () {
return {
message: 'Hello world for vueloader!'
}
}
}
</script>

<style>
.greeting {
color: blue;
}
</style>