Vue 2, why data must be a function
New Courses Coming Soon
Join the waiting lists
Using Vue you might surely asked yourself the question 'why must data be a function that returns an object, and not just an object?'
Using Vue you might surely asked yourself the question “why must data
be a function that returns an object, and not just an object?”
<template>
<a v-on:click="counter = counter + 1">{{counter}}</a>
</template>
<script>
export default {
data: function() {
return {
counter: 0
}
}
}
</script>
Especially considering that in some places, data
is not a function, as you most probably see in the App component in several examples.
The explanation is that when the component is used multiple times, if it’s not a function, but a regular object, like this:
data: {
counter: 0
}
then because of how JavaScript works, every single instance of the component will share this property.
This is not what you want in 99.9% of the cases, and instead you must do:
data: function() {
return {
counter: 0
}
}
It might be non-intuitive at first, but once you accept this explanation and learn that it’s kind of harmful to your application, and a possible source of bugs, you’ll remember to always use a function for data.
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X