Hey there Dev.to community!

I've been a Vue fan for a long time, even before time itself. Here are some questions I've had the experience of being asked while in an interview. Something to be clear first, don't ever look at an interview as an interview! Just have fun and be yourself. Answer things you know and honestly answer No if you don't. If you get into a job with cheating or lying, you won't be happy there and you might also get in trouble. So study hard, but don't push it too hard.

Some questions might not be exclusive to Vue, and they might be general questions that can apply to other frameworks or tools as well.

The questions aren't ordered in any category (being hard to easy or anything).

Some code samples are from Vue's Official Documentation.

What is SPA?

SPA stands for Single Page Application. A SPA is an application that downloads the layout first and by moving between pages it won't need to get the whole page again and won't refresh the whole page. Instead, it will retrieve the necessary parts from the server and replace its content on the page.

What are Vue directives?

Vue directives are simply HTML attributes used by Vue to extend the functionality of Vue. Like:

• v-if, v-else
• v-show
• v-model
• v-on

What is two-way binding?

Two-way binding in Vue refers to the ability of Vue to update the input value and the data stored in your Vue script. This is usually done by the v-model directive.

<template>
    <div>
        <input type="text" v-model="message" /><br>
        Your message: {{ message }}
    </div>
</template>

<script>
  export default {
    data() {
      return {
        message: ''
      }
    }
  }
</script>

What is Virtual DOM (VDOM)?

This is a scary question on the surface, but the answer is quite simple. Virtual DOM is a JavaScript object that holds your UI (document) and syncs its changes with the actual DOM (your real UI) when needed or told to do so. This makes the page much faster since updating DOM every once is a high-cost operation.

What is Vue SFC?

SFC refers to Single File Component feature of Vue. A Vue component can be a simple object as below:

Vue.component('button-counter', {
    data: function() {
      return {
        count: 0
      }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  })

Or for more complex applications you can put every component in file with .vue extension and import it when needed. This file looks like this:

<template>
    <div>

    </div>
</template>

<script>
  export default {

  }
</script>

<style scoped>

</style>

A Vue SFC can hold components template (usually HTML), script and style. This feature helps you organize your application better.

What is Vue life-cycle?

The life-cycle term refers to the way Vue gets to run and some of the function that it calls in order to let the programmer choose when to run some functionalities of their program. The picture below helps you a lot in this matter:

How would you import data from the back-end to your Vue application?

The main idea of designing a front-end application is to let users interact with the data you have, so importing them are crucial. There are several ways of importing data to a Vue application but two are really common:

• Putting data in your back-end template and send it along
• AJAX call

The first one is discouraged since it can cause conflicts. Making an AJAX call is much easier and is actually a more standard way. To make an AJAX call, you can use JavaScript's built-in fetch function and for more advanced features you can use axios which is a third-party library.

What are watchers in Vue?

Watchers are functions that run when specific data is changed.

  export default {
    data() {
      return {
        message: ''
      }
    },
    watch: {
      message() {
        console.log('Message got changed!')
      }
    }
  }

What are computed properties in Vue?

A computed property is as a data field which is a function of another data field:

  export default {
    data() {
      return {
        username: 'Adnan'
      }
    },
    computed: {
      welcome() {
        return 'Welcome ' + this.user
      }
    }
  }

Now welcome is equal to Welcome Adnan and can be used as a data property like {{ welcome }}.

What is routing in Vue?

Routing in Vue means separating your application into multiple pages and assigning each page to a component. Vue routing is done by Vue Router which is an official library designed by Vue team.

What are the filters in Vue?

Filters are used to manipulate data when rendering. Like capitalizing.

A filter is indicated after a pipe (vertical bar) sign:

<template>
    <div>
            {{ message | capitalize }}
    </div>
</template>

Filters are also available in bindings:

<template>
    <div>
            <div :id="myId | capitalize"></div>
    </div>
</template>

How to create custom filters?

A filter can be defined both globally (which can be accessed throughout the Vue application, or locally only for a component.

Globally:

Vue.filter('capitalize', function(value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  })

Component:

filters: {
    capitalize: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }

What is Vue mixin?

Mixins are objects that can extend your current component. This can help you share functionality between your components.

// define a mixin object
  var myMixin = {
    created: function() {
      this.hello()
    },
    methods: {
      hello: function() {
        console.log('hello from mixin!')
      }
    }
  }

  // define a component that uses this mixin
  var Component = Vue.extend({
    mixins: [myMixin]
  })

  var component = new Component() // => "hello from mixin!"

What is Vuex?

Vuex is a state management library. It helps you organize your states in a way it is meant to be and reducing the risk of data being altered in a way that's not secure.

Check out my free Node.js Essentials E-book here:

NodeJS Essentials | Free E-Book

Adnan Babakan (he/him) ・ Sep 11 '20

#node #javascript #books