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:
Top comments (11)
It's worth noting that
Filtershave been removed in Vue 3.It is advised to use a regular method call or computed property to achieve its task.
Your example would then become,
Read more about it and the migration strategy here v3.vuejs.org/guide/migration/filte...
Thanks for reading my article. Yes, I am aware of this change but Vue 3 isn't officially out yet and the current official version is 2. So I omitted Vue 3 related things.
Nice article!, 2 things:
What are computer properties in Vue?=> mistype, "computed", I guess?.Hi, thanks for reading my article. You are right about number one and thanks for spotting the typo!
Great article.
Is it worth adding a few Vue 3 questions?
E.g. What is the composition API?
Or even adding something regarding the drawbacks and benefits of render functions vs SFC
Hi, thanks for reading my article. I also thought of adding this question but since Vue 3 is still not the officially released version I think this question wouldn't fit in an interview.
Vue 3 was officially released as of 18th September 2020.
There are still a couple of issues, mainly with DevTools and IE support.
If you've updated the CLI and created a new project, it now defaults to Vue 3.
Yes Vue 3 is released. But the main website still documents Vue 2 by default. So the major version in use is still Vue 2.
Great! I want to suggest one more question. Compare Vue with other frameworks and libraries? vuejs.org/v2/guide/comparison.html
Thanks for reading my article. I don't think comparing two frameworks in performance or other ways would be a good question in an interview. At least I've never encountered one XD.
Hmm maybe the better question is "Why Vue? Why did you choose it?"