Vue JS: Difference of data() { return {} } vs data:() => ({ })

Question

I'm curious both of this data function, is there any difference between this two.

I usually saw is

data () {   return {     obj   } } 

And ES6 fat arrow (=>) which I typically used

data:()=>({   obj }) 

Answer 1

No difference in your specific example, but there is a very important difference between those two notations, specially when it comes to Vue.js: the this won't reflect the vue instance in arrow functions.

So if you ever have something like:

export default {     props: ['stuffProp'],     data: () => ({       myData: 'someData',       myStuff: this.stuffProp     }) } 

It won't work as you expect. The this.stuffProp won't get the stuffProp prop's value (see below for more on the reason why).

Fix

Change the arrow function to, either (ES6/EcmaScript 2015 notation):

export default {     props: ['stuffProp'],     data() {                                   // <== changed this line       return {         myData: 'someData',         myStuff: this.stuffProp       }     } } 

Or to (regular, ES5 and before, notation):

export default {     props: ['stuffProp'],     data: function() {                           // <== changed this line      return {         myData: 'someData',         myStuff: this.stuffProp       }     } } 

Reason

Don't use arrow functions (() => {}) when declaring Vue methods. They pick up the this from the current scope (possibly window), and will not reflect the Vue instance.

From the API Docs:

Note that you should not use an arrow function with the data property (e.g. data: () => { return { a: this.myProp }}). The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.myProp will be undefined.