Frequently asked questions in Vue.js

Frequently asked questions in Vue.js Home career Frequently asked questions in Vue.jscareerFrequently asked questions in Vue.jsBy Bidisha Das - November 4, 20195000Facebook IT Developers in vue.jsVue.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? Contents hide 1 1. What was your reason for choos ing Vue.js over other external front-end frameworks? 1.1 a. Performance 1.2 b. Large-scale Apps are Made More Suitable by Vue.js 1.3 c. Ease of Use of Vue.js 2 2. What are Life Cycle Hooks in Vue instance? 3 3. What is the difference between v-if and v-for directives? 4 4. Differentiate between computed properties and methods. 5 5. Explain the reactivity of Vue.js and the common issues faces with the change in tracking. 6 6. Describe the data-flow between various components of Vue.js. a. PerformanceAngular, 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.jsReact and Angular have been enterprise-grade frameworks from the start as were developed by Facebook and Google, respectively. However, Vue.js started as a o ne-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.jsAngular 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 Frameworks2. 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-rendere d. 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-ifonly renders the element to the DOM if the expression passes whereasv-showrenders all elements to the DOM and then uses the CSS display property to show/hide elements based on expression. v-ifhas higher toggle costs since it add or remove the DOM every time whilev-showhas higher initial render costs. i.e,v-showhas a performance adva ntage if the elements are switched on and off frequently, while thev-ifhas the advantage when it comes to initial render time. v-ifsupports tab butv-showdoesn’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 arereactive, 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.setmust be used here as well.Vue cannot detect object property addition or deletion due to a JavaScript limitation, so theVue.setmethod 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 o f 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!TAGSvue.js cdnvue.js componentsvue.js computedvue.js lifecyclevue.js mountedvue.js propsvue.js tutorialvue.js typescriptvue.js v-forvue.js v-model