Vue JS Interview Questions and Answers
Question - 131 : - How do you make sure vue application is CSP complaint?
Answer - 131 : -
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.
Question - 132 : - What is the difference between full and runtime only builds?
Answer - 132 : -
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.
Question - 133 : - How do you configure vuejs in webpack?
Answer - 133 : -
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
}
}
}
Question - 134 : - What is the purpose of vuejs compiler?
Answer - 134 : -
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: '
{{ message }}
'
})
// this does not
new Vue({
render (h) {
return h('div', this.message)
}
})
Question - 135 : - How do you force update?
Answer - 135 : -
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.
Question - 136 : - What is the purpose of renderError?
Answer - 136 : -
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')
Question - 137 : - How do you access parent instance?
Answer - 137 : -
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.