Vue interview questions and answers
1. What is Vue.js?
Vue.Js is a progressive framework that is used in creating dynamic user interfaces. Moreover, Vue.Js is different from other monolithic frameworks since it designed to be highly adaptable. Generally, Vue is simple thus easy to learn. Its main library is focused on view only, consequently making it easy to integrate with other libraries.
2. Explain the differences between one-way data flow and two-way data binding?
In one-way data flow the UI does not update automatically when data model is changed; we need to write some custom code to make it update 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 v-model directive is used and the UI automatically updates when the data model is changed.
3. Describe what a Vue.js watcher is and when to use one.
Watchers are a generic way to react to data changes instead of using computed properties.
They should be used when asynchronous or expensive operations need to be executed in response to changing data.
4. What is a Vue.js directive?
A directive is a special token in the markup that tells the library to do something to a DOM element. A Vue.js directive can only appear in the form of a prefixed HTML attribute that takes the following format:
<element
prefix-directiveId="[argument:] expression [| filters...]">
</element>5. What is a life cycle hook? Describe each hook.
Each Vue instance goes through series of steps when it is created, mounted and destroyed. Along the way, it will also runs functions called life cycle hooks, giving us the opportunity to add our own code at specific stage. Below are the events, a Vue instance goes through.
- beforeCreate — The first hook in the creation hooks. They allow us to perform actions before our component has even been added to the DOM. We do not have access to the DOM inside of this.
- created — Run code after an instance is created. We can access the reactive
data. But templates and Virtual DOM have not yet been mounted or rendered. - beforeMount — Runs right before the initial render happens and after the template or render functions have been compiled.
- mounted — The most frequently used hook.We will have full access to the reactive component, templates, and rendered DOM.
- beforeUpdate — Runs after data changes on our component and the update cycle begins. But runs right before the DOM is patched and re-rendered.
- updated — Runs after data changes on our component and the DOM re-renders. If we need to access the DOM after a property change, here is probably the safest place to do it.
- beforeDestroy — This hook will run right before tearing down the instance. If we need to clean up events or reactive subscriptions, this is the right place to do it.
- destroyed — This hook will be used to do any last minute clean up.
