Javascript is required
ยท
8 min read

My Top Vue.js Interview Questions

My Top Vue.js Interview Questions Image

This article summarizes a list of Vue.js interview questions that I would ask candidates and that I get often asked in interviews.

1. What is Vue.js?

Vue is a progressive framework for building user interfaces that was designed to be incrementally adoptable. Its core library is focused exclusively on the view layer so that it can easily be integrated with other projects or libraries.

But in contrast to React, Vue provides companion libraries for routing and state management which are all officially supported and kept up-to-date with the core library.

2. What are some of the main features of Vue.js?

  • Virtual DOM: Vue uses a Virtual DOM, similar to other frameworks such as React, Ember, etc.
  • Components: Components are the basic building block for reusable elements in Vue applications.
  • Templates: Vue uses HTML-based templates.
  • Routing: Vue provide it's own router.
  • Built-in directives: For example, v-if or v-for
  • Lightweight: Vue is a lightweight library compared to other frameworks.

3. Why would you choose Vue instead of React or Angular?

Vue.js combines the best parts of Angular and React. Vue.js is a more flexible, less opinionated solution than Angular but it's still a framework and not a UI library like React

I recently decided to focus my freelancer career on Vue.js, you can read more about this decision in the corresponding blog post.

4. What is an SFC?

Vue Single File Components (aka *.vue files, abbreviated as SFC) is a special file format that allows us to encapsulate the template (<template>), logic (<script>), and styling (<style>) of a Vue component in a single file.

Vue SFC is a framework-specific file format and must be pre-compiled by @vue/compiler-sfc into standard JavaScript and CSS. A compiled SFC is a standard JavaScript (ES) module.

5. What are computed properties?

Computed properties should be used to remove as much logic as possible from the templates as otherwise the template gets bloated and is harder to maintain. If you have complex logic including reactive data in your template you should use a computed property instead.

Instead of methods, computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed.

6. What are watchers?

Watchers are a more 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.

7. What is the difference between registering a component locally and globally?

If a component is registered globally it can be used in the template of any component instance within this application:

1const app = Vue.createApp({})
2
3app.component('component-a', {
4  /* ... */
5})
6
7app.mount('#app')

Global registration can unnecessarily increase your JavaScript bundle if you are using build systems like Webpack. If you stop using a component in your code, it will still be included in the final build.

To avoid this, we can register components locally by defining them in the component where it is needed:

1import ComponentA from './ComponentA.vue'
2
3export default {
4  components: {
5    ComponentA,
6  },
7  // ...
8}

Note that locally registered components are not available in subcomponents.

8. What are some of the most important directives in Vue?

  • v-if adds or removes DOM elements based on the given expression.
  • v-else displays content only when the expression adjacent v-if resolves to false.
  • v-show is similar to v-if, but it renders all elements to the DOM and then uses the CSS display property to show/hide elements.
  • v-for allows us to loop through items in an array or object.
  • v-model is used for two-way data bindings.
  • v-on attaches an event listener to the element.

Here you can find all available directives.

9. What is the Vue application instance?

The application instance is used to register globals that can then be used by components within that application. An application instance is created with the createApp:

1const app = Vue.createApp({
2  /* options */
3})

In Vue 2 this was called Vue instance and created this way: