Skip to content

Vue 2, why data must be a function

New Course Coming Soon:

Get Really Good at Git

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.

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!
→ Get my Vue.js 2 Handbook

Here is how can I help you: