Vue.js interview questions & answers
Common questions
1. What is Vue.js?
Vue.js is a JavaScript framework designed to produce dynamic user interfaces in front-end programming. It is easy to start off and work with - one needs to add a Vue library to a project and start introducing dynamic website features. It is also known as a progressive framework, meaning Vue is capable of handling important things, such as server-side DOM rendering and client-side routing.
2. What are the essential features of Vue?
Here's a brief overview: virtual DOM (a replica of the interface in the form of JS data structures, thus better optimized); data binding (to manipulate HTML attributes, style, classes, etc. with the binding directive); components (to create custom elements); transition (multiple ways to apply transition to HTML elements, including animation libraries, to achieve interactivity); HTML-based templates (Vue compiles templates into render functions, i.e. a programmer should replace the template with the render function); directives (v-if, v-else, v-show, v-on, v-bind, v-model - to perform actions on the front-end); routing (vue-router performs the navigation between pages); and overall fast performance.
3. Why choose Vue over other frameworks?
Vue's closest competitors are Angular and React. In terms of performance all three frameworks are quite equal. As for the learning curve, React is harder and more complex, and Angular requires the knowledge of TypeScript to get started, therefore Vue is the easiest one. Besides, Vue.js uses widespread web technologies such as HTML, CSS, and JavaScript. It is also as good for large-scale applications as React (developed by Facebook) and Angular (developed by Google).
4. How to create a Vue instance?
Creating a Vue instance can be quickly done with the Vue function:
const vm = new Vue({
// options
})
5. What are the differences between 1-way data flow and 2-way data binding?
In Vue we use v-bind for one-way data flow or binding. Under one-way data flow the user interface part of an application is not updated automatically when the data model is modified, thus one has to write custom code for every such instance. In Vue we use v-model directive for two-way data binding. Under two-way data binding the user interface part does automatically update when the data model is modified.
6. What are filters in Vue?
In Vue.js filters are tools designed to transform the output to be rendered in a browser. It is basically a function that gets a value, processes it, and returns it. It is represented by a single-pipe sign (|) and one or more arguments can follow:
<element directive="expression | filterId [args...]"></element>Typically, filters are applied for text formatting, filtering on the DOM level so data stays the same in the storage but is displayed as set by a programmer. Also, one can reuse filters, for example declare it globally and apply it on any component. Note that in Vue 2.0 no built-in filters are available, though users can create their own.
7. How would you create a custom filter?
One can use the Vue.filter() method to create a custom filter, it takes two parameters and a unique name. Filter function extracts a value as argument and returns it transformed. For example here:
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})8. What are components and how to register a component inside another component?
Components are an integral and essential part of Vue js. They contain custom elements that help enhance HTML elements and reuse code. Here is how one would register a component inside another component in Vue:
export default {
el: '#your-element'
components: {
'your-component'
}
}9. What types of directives are there in Vue?
General, literal, empty and custom directives are available in Vue.js. General directives include inline expressions, data binding directives, arguments, filters, multiple clauses, etc. Empty directives do not require attribute values, they perform an action only once (v-pre, v-transition, v-animation, v-cloak). Literal directives do not create data bindings, instead they take a value as a literal string (v-component, v-ref, v-partial, v-effect). Global custom directives are created with the Vue.directive() method, where a definition object provides hook functions (bind, update, unbind).
10. What is a Vue resource, and how to install it?
It is a plugin for initiating web requests and managing responses via a XMLHttpRequest or JSONP. We can install it with the help of yarn or NPM, like this:
$ yarn add vue-resource$ npm install vue-resource11. What is virtual DOM in Vue?
It is a JavaScript document object model (DOM), and virtual implies that the application does not update the DOM directly, thus minimizing the computational resource consumption. Virtual DOM is the ability to control timing, i.e. it maintains the state of data without repeated rendering. It can also be used to optimize web applications by decreasing the update frequency.
12. How to import a JavaScript library in the Vue component?
There are two possible ways of doing it:
a) Import a local JS library by introducing the "import" word within the script tag of the Vue file.
b) Add an external JS library into the hook of the Vue component.
13. What is a single-file component?
It is a file with the .vue extension that contains a component including its template and styles bundled together. The file consists of <script>, <template> and <style> blocks, and extra custom blocks are allowed as well. In other words, single file components are self-contained in their own files. The benefits of such a structure are that files are registered globally, one can create template code inside files, and apply CSS to the component.
14. Explain mixins.
Mixins is the approach to share the functionality of reusable Vue components. By applying a mixin to a component all of its options are integrated into both. The so-called "dry principle" ensures that one does not repeat the actions. So mixins provide flexibility yet they do not have any effect outside defined scope. Essentially, mixins are great for code reuse.
15. How to verify when a mutation occurs?
Testing mutations is nothing complex since they are just functions that rely on arguments only. Programmers should always keep mutations contained and exported separately from default export.
Advanced questions
16. How would you characterize the life cycle of a Vue instance?
The cycle of any instance in Vue.js starts with a couple of initialization steps. These may include configuring observation of data, putting together a template, setting up data bindings. Later it should also invoke hooks, aimed at adding custom logic, compiling or destroying. As there are no controllers in Vue, lifecycle hooks are used to create custom logic for components.
17. Describe directives in Vue and list the ones you've used.
Vue comes with a bunch of directives in it, designed to expand HTML possibilities with more tags and attributes, and thus also expand functionality to produced applications. Creating custom directives is of course possible in Vue as well. Used by me, same as the most common directives, are v-if, v-show, v-model, v-on, v-else.
18. How to create a constant in Vue?
You should use the "const" keyword, and create a separate file for constants. Also, one could place constants into a Vue component (Constants.vue), and then it could be converted into a JavaScript file (Constants.js).
19. How to define a component in Vue?
As interface units with their markup and style, Vue components can be defined in four ways:
Vue({ /*options */ }); Vue.component(‘component-name', { /* options */ }); -
- with the help of local components;
-
.vuefiles or single-file components.
The last one is typically used to build single-page applications.
20. How to call the rest API?
Calling REST interfaces from Vue can be done with HTTP libraries, for example Axios. Here is how it would look to add Axios into project:
npm install axios --save21. What is Vue reactivity and what issues could emerge while tracking changes?
Properties of all Vue data options are reactive, i.e. if modified, a component will be updated and rendered again automatically. Vue allows detecting precisely when properties are accessed or modified. Although there are certain limitations hereto. Because of JavaScript, Vue is not capable of detecting when object property is added or deleted. This can be remedied by the Vue.set method aimed at adding new reactive properties.
22. What are the common causes of memory leaks in Vue.js apps?
One of the main reasons for this issue in Vue is external libraries that result in creating their own instances and impacting the DOM. Although there is the directive to delete component instances (v-if), it is recommended to mitigate external library traces manually.
23. What are the lifecycle hooks?
These are functions that process Vue instances, each one consists of 8 lifecycle hooks. Let's list them in order:
-
"before create" - called when an instance is created
-
"created" - an instance sets initial properties, data, etc.
-
"before mount" - called before an instance is added to the DOM
-
"mounted" - the template name once it has become functional
-
"before updated" - called before the update caused by the DOM change
-
"updated" - called after the DOM is updated
-
"before destroy" - a place to unload resources before deleting an instance
-
"destroyed" - called when all instances are deleted.
24. How are v-show and v-if different?
Both directives could be used to show or hide items. However, v-if renders conditionally, i.e. if the starting condition is false, it won't render the block until it is changed. In turn, v-if deletes and recreates the block when a condition is changed. Elements are rendered by v-show, it doesn't remove elements or blocks from the DOM, it sets the CSS attribute.
25. Can you use styled components in Vue?
There is a library with styled components called VueJS Styled Component, however it is better to utilize React.js to style components.
26. What are the benefits of Vue CLI?
This global npm package provides quick scaffolding ability for projects, it contains a vast array of plugins for front-end, graphical UI can be used to manage Vue projects, as well as it allows quick prototyping with little or zero configuration.
27. What can you tell about fast prototyping?
In short, fast prototyping can be performed with just one .vue file, for that we have to use the vue serve and vue build commands within the Vue CLI.
28. What are navigation guards?
In the Vue router navigation guards are there to safeguard set navigation's by redirecting or canceling. There are 3 methods of plugging into navigation's: global, per-route and in-component.
29. What is vue-loader?
It is a loader plugin that could be used to produce single-file components with 3 sections (template, script, style). With loader modules such as SASS or SCSS you can process each section. Vue-loader also allows hot reloading.
30. How can you improve Vue performance?
I'd start with determining the exact reason of a sluggish Vue application, and it could be one of the following: excessive number of external libraries that take too much space, excessive number of unoptimised images, no lazy loading for images, no reused functions, all pages are loading at once. Then fix the issue and performance should improve.