Vue JS Interview Questions and Answers
Question - 31 : - List some features of Vue.js.
Answer - 31 : -
Vue js comes with following features
- Templates
- Reactivity
- Components
- Transitions
- Routing
Question - 32 : - Explain Life cycle of Vue Instance.
Answer - 32 : -
The Life cycle of each Vue instance goes through a series of initialization steps when it is created.
– for example, it needs to set up data observation, compile the template, and create the necessary data bindings. Along the way, it will also invoke some lifecycle hooks, which give us the opportunity to execute custom logic. For example, the created hook is called after the instance is created:
new Vue({
data: {
a: 1
},
created: function () {
// `this` points to the vm instance
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
There are also other hooks which will be called at different stages of the instance’s lifecycle, for example compiled, ready and destroyed. All lifecycle hooks are called with their this context pointing to the Vue instance invoking it. Some users may have been wondering where the concept of “controllers” lives in the Vue.js world, and the answer is: there are no controllers in Vue.js. Your custom logic for a component would be split among these lifecycle hooks.
Lifecycle Diagram
Below diagram shows complete life cycle of Vue Instance
Answer - 33 : -
You can create Vue instance with the Vue function:
var vm = new Vue({
// options
})
Question - 34 : - Explain the differences between one-way data flow and two-way data binding?
Answer - 34 : -
In one-way data flow the view(UI) part of application does not updates automatically when data Model is change we need to write some custom code to make it updated every time a data model is changed.
In Vue js v-bind is used for one-way data flow or binding.
In two-way data binding the view(UI) part of application automatically updates when data Model is changed.
In Vue.js v-model directive is used for two way data binding.
Question - 35 : - How to create Two-Way Bindings in Vue.js?
Answer - 35 : -
v-model directive is used to create Two-Way Bindings in Vue js.In Two-Way Bindings data or model is bind with DOM and Dom is binded back to model.
In below example you can see how Two-Way Bindings is implemented.
Question - 36 : - How to create a custom filter in Vue.js?
Answer - 36 : -
Vue.filter() method is used to create and register a custom filter in Vue js. Vue.filter() method takes two parameters a filterId that is usnique name to filter that you going to create and a filter function that takes a value as the argument and returns the transformed value.
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
Question - 37 : - What are Components in Vue.js? How to register a component inside other component
Answer - 37 : -
Vue Components are one of most powerful features of Vue js.In Vue components are custom elements that help you extend basic HTML elements to encapsulate reusable code.
Following is the way to register a Vue component inside other component
export default {
el: '#your-element'
components: {
'your-component'
}
}
Question - 38 : - What are Directives in VUE.js, List some of them you used?
Answer - 38 : -
The concept of directive in Vue js is drastically simpler than that in Angular. Vue.js directives provides a way to extend HTML with new attributes and tags. Vue.js has a set of built-in directives which offers extended functionality to your applications.You can also write your custom directives in Vue.js .
Below are list of commonly used directives in Vue.js
- v-show
- v-if
- v-model
- v-else
- v-on
Question - 39 : - List type of Directive are available in Vuejs.
Answer - 39 : -
In Vue js following types of directives are available
- General Directives
- Literal Directives
- Empty Directives
- Custom Directives
Question - 40 : - What is VUE-resource, how can you install Vue Resource ?
Answer - 40 : -
VUE-resource is a plugin for vue.js that provides services for making web requests and handle responses using a XMLHttpRequest or JSONP
You can install it via yarn or NPM.
- $ yarn add vue-resource
- $ npm install vue-resource