Vue JS Interview Questions and Answers
Question - 111 : - What are global mixins?
Answer - 111 : -
Sometimes there is a need to extend the functionality of Vue or apply an option to all Vue components available in our application. In this case, mixins can be applied globally to affect all components in Vue. These mixins are called as global mixins.
Let's take an example of global mixin,
Vue.mixin({
created(){
console.log("Write global mixins")
}
})
new Vue({
el: '#app'
})
In the above global mixin, the mixin options spread across all components with the console running during the instance creation. These are useful during test, and debugging or third party libraries. At the same time, You need to use these global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components.
Question - 112 : - How do you use mixins in CLI?
Answer - 112 : -
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.
Question - 113 : - What are custom options merging strategies?
Answer - 113 : -
Vue uses the default strategy which overwrites the existing value while custom options are merged. But if you want a custom option merged using custom login then you need to attach a function to Vue.config.optionMergeStrategies
For the example, the structure of myOptions custom option would be as below,
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// return mergedVal
}
Let's take below Vuex 1.0 merging strategy as an advanced example,
const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
if (!toVal) return fromVal
if (!fromVal) return toVal
return {
getters: merge(toVal.getters, fromVal.getters),
state: merge(toVal.state, fromVal.state),
actions: merge(toVal.actions, fromVal.actions)
}
}
Question - 114 : - What are custom directives?
Answer - 114 : -
Custom Directives are tiny commands that you can attach to DOM elements. They are prefixed with v- to let the library know you're using a special bit of markup and to keep syntax consistent. They are typically useful if you need low-level access to an HTML element to control a bit of behavior.
Let's create a custom focus directive to provide focus on specific form element during page load time,
// Register a global custom directive called `v-focus`
Vue.directive('focus', {
// When the bound element is inserted into the DOM...
inserted: function (el) {
// Focus the element
el.focus()
}
})
Now you can use v-focus directive on any element as below,
Question - 115 : - How do you register directives locally?
Answer - 115 : -
You can also register directives locally(apart from globally) using directives option in component as below,
directives: {
focus: {
// directive definition
inserted: function (el) {
el.focus()
}
}
}
Now you can use v-focus directive on any element as below,
Question - 116 : - What are the hook functions provided by directives?
Answer - 116 : -
A directive object can provide several hook functions,
- bind: This occurs once the directive is attached to the element.
- inserted: This hook occurs once the element is inserted into the parent DOM.
- update: This hook is called when the element updates, but children haven't been updated yet.
- componentUpdated: This hook is called once the component and the children have been updated.
- unbind: This hook is called only once when the directive is removed.
Question - 117 : - How do you pass multiple values to a directive?
Answer - 117 : -
A directive can take any valid javascript expression. So if you want to pass multiple values then you can pass in a JavaScript object literal.
Let's pass object literal to an avatar directive as below
Now let us configure avatar directive globally,
Vue.directive('avatar', function (el, binding) {
console.log(binding.value.width) // 500
console.log(binding.value.height) // 400
console.log(binding.value.url) // path/logo
console.log(binding.value.text) // "Iron Man"
})
Question - 118 : - What is function shorthand in directive hooks?
Answer - 118 : -
In few cases, you may want the same behavior on bind and update hooks irrespective of other hooks. In this situation you can use function shorthand,
Vue.directive('theme-switcher', function (el, binding) {
el.style.backgroundColor = binding.value
})
Question - 119 : - What is the benefit of render functions over templates?
Answer - 119 : -
In VueJS, the templates are very powerful and recommended to build HTML as part of your application. However, some of the special cases like dynamic component creation based on input or slot value can be achieved through render functions. Also, these functions gives the full programmatic power of javascript eco system.
Question - 120 : - What is a render function?
Answer - 120 : -
Render function is a normal function which receives a createElement method as it’s first argument used to create virtual nodes. Internally Vue.js' templates actually compile down to render functions at build time. Hence templates are just syntactic sugar of render functions.
Let's take an example of simple Div markup and corresponding render function. The HTML markup can be written in template tag as below,
Welcome to Vue render functions
and the compiled down or explicit render function would appear as below,
render: function (createElement) {
return createElement('div', {
'class': {
'is-rounded': this.isRounded
}
}, [
createElement('p', 'Welcome to Vue render functions')
]);
}