Frequently asked questions in Vue.js

Vue.js is nothing new to you if you are a web developer on the go. Another Javascript framework which is reactive, easier to use and implement before you can start off with something new. On one hand, if Angular is a little bit too much for you to gulp at one go, welcome to Vue.js.

Personally working on Vue.js can be motivating because it is easier to learn and understand given it is relatively smaller to grasp. Maybe Vue.js is your thing to learn. You can build a reactive project using this trending framework.

However, once you are done and dusted with a Vue.js project in hand, you can face multitude of interview questions on Vue.js.
Here is a list of those questions and how to answer them.

1. What was your reason for choosing Vue.js over other external front-end frameworks?

a. Performance

Angular, Vue, and React all of these three frameworks display almost similar performance. There is significantly really difference here. However, Angular apps with the same base features and functionality will occupy a larger compiled size than that of React and Vue.

b. Large-scale Apps are Made More Suitable by Vue.js

React and Angular have been enterprise-grade frameworks from the start as were developed by Facebook and Google, respectively. However, Vue.js started as a one-man project – which has recommendable progress. But, it’s come a long way since then, and it has also attracted a large number of supporters and developers. As a matter of fact, its core team now has more than 20 developers. I am sure, that makes you aim for Vue.js itself.

As a matter of fact, adding to it’s feathers, Vue.js has also been adopted by reputed companies. You will be surprised to know, that Vue.js has been adopted even by companies like Adobe and Alibaba, and has been used for even ‘Grammarly’.

Thus, Vue.js as a frameworks is well-suited for building large-scale applications.

c. Ease of Use of Vue.js

Angular effectively requires an in-depth knowledge of TypeScript to at least get started with it. Angular framework design broadly targets building an enterprise-scale applications and is quite complex. Developers need to familiarize themselves with an extensive framework API and its concepts before starting to be productive.

React is widely considered to be having a steep learning curve. JSX, ES6, and a build system (like webpack) are certain technologies developers need to learn before they can be productive with React. Adopting React for other scenarios would require extra learning time than that of building a single-page app or creating React App.

Vue.js has been incrementally adoptable. One of the most important design goal of Vue.js was the attainment of this adaptability. Without rebuilding the whole app from the ground up, it can be dropped into legacy projects and it can be instantaneously used . Vue.js uses core web technologies like HTML, CSS, and plain JavaScript (ES5) that the web developers are already pretty much familiar with. The use of build tools is not required: in fact, Vue can be added with just a <script> tag.

Also Read Reason of Laravel being chosen over other PHP Frameworks

2. What are Life Cycle Hooks in Vue instance?

The various life cycle hooks in Vue instance can be broadly classified as follows.

• beforeCreate — In the list of creation hooks, this is the first one. It actually allows us to perform actions before our component has been added to the Data Object Model. We do not have access to the Data Object Model inside of this creation hook.
• created — This life cycle hook hook can be used to run code after an instance is created. We can access thedata that is reactive here. But on a detailed note, the templates and Virtual DOM have not yet been mounted or rendered in this phase.
• beforeMount — Most likely you will never need to use this hook. However, just for the information, the beforeMount hook runs right before the initial render happens. It also occurs after the template or render functions have been compiled.
• mounted — This is the most frequently used lifecycle hook and that too for a good reason. We will have full access to the templates, reactive component, and rendered DOM in this hook.
• beforeUpdate — This lifecycle hook runs right before the DOM is patched and re-rendered. To put it briefly, it runs after data changes on our component and the update cycle has already begun.
• updated — If we need to access the DOM after a property change, this is the lifecycle hook you could be looking for. As a matter of fact, the updated lifecycle hook runs after data changes on our component and the update cycle begins.
• beforeDestroy — If we need to clean up events or reactive subscriptions, the beforeDestroy hook is the best place to perform this action.
• destroyed — This lifecycle hook will be used to do any last minute clean up that is required by the application.

3. What is the difference between v-if and v-for directives?

• v-if only renders the element to the DOM if the expression passes whereas v-show renders all elements to the DOM and then uses the CSS display property to show/hide elements based on expression.
• v-if has higher toggle costs since it add or remove the DOM every time while v-show has higher initial render costs. i.e, v-show has a performance advantage if the elements are switched on and off frequently, while the v-if has the advantage when it comes to initial render time.
• v-if supports tab but v-show doesn’t support.

4. Differentiate between computed properties and methods.

Computed properties will only be re-evaluated when some of its dependencies have changed.  They are getter functions in Vue.js instance rather than actual methods. 

On the other hand, a method invocation will always run the function whenever a re-render happens.

As a matter of fact, when we have to compute something by doing lot of computations like looping through a large array, it is best to use computed properties instead of a method. Without caching,however, we would spend more time than necessary. When we do not want cache, only then we can use a method instead.

5. Explain the reactivity of Vue.js and the common issues faces with the change in tracking.

All the reactive properties are converted to getters and setters during initialization, thus allowing Vue to detect when those properties are accessed or changed. All such properties defined in a Vue instance’s data option are reactive, meaning that if they change, the component is automatically updated and re-rendered as needed.

The following limitations must be handled and kept in mind when designing a Vue app:

• Vue.js cannot detect when an array item is modified using an index. Vue.set must be used here as well.

• Vue cannot detect object property addition or deletion due to a JavaScript limitation, so the Vue.set method must be used to add new root-level reactive properties.

6. Describe the data-flow between various components of Vue.js.

A one-way data flow is present in Vue.js. Data is passed to child components from a given parent component using a prop or by using a custom attribute that becomes a property on the child component instance.

The child component can emit a special event for updating the props passed to it. The child component can communicate back to the parent by the use of an event. The parent can assign a handler to any event emitted by the child component instance and data can be passed back to the parent.

As a matter of fact, when the parent component updates a prop value, it’s automatically updated in the child component. Thus, mutating or alternating a property inside a child component should not be done. Also, it does not affect the parent component ( until and unless it is an object or array).

Thus, with the knowledge of these most frequently asked Vue.js questions, you are good to go ahead, learn and sit for an interview. But keep your curiosity up and learn new things about this framework. After all, what are you a developer for!