data with function return vs. return plain data object

Question

When I started with Vue.js I read about a case where you return a data property with return and sometimes without. I cannot find that article anymore that's why I'm asking here.

That's how I use it today

 data: function () {
      return {
        myData : "data"
      }
    },

But that's how I see it in documentation very often - don't know the difference anymore:

 data: {
    myData: "data"
  },

I was wondering about the same thing, but didn't bother to research it. Thanks for asking :) — ssc-hrep3
– ssc-hrep3, Commented Jun 13, 2017 at 17:58

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

https://vuejs.org/2016/02/06/common-gotchas/#Why-does-data-need-to-be-a-function

Why does data need to be a function?

In the basic examples, we declare the data directly as a plain object. This is because we are creating only a single instance with new Vue(). However, when defining a component, data must be declared as a function that returns the initial data object. Why? Because there will be many instances created using the same definition. If we still use a plain object for data, that same object will be shared by reference across all instance created! By providing a data function, every time a new instance is created, we can simply call it to return a fresh copy of the initial data.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 13, 2017 at 17:55

ceejayoz

181k42 gold badges311 silver badges382 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

data with function return vs. return plain data object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related