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
})
asked Feb 26, 2018 at 3:04
BGTabulation BGTabulate
1,7573 gold badges20 silver badges40 bronze badges
-
1Possible duplicate of ECMAScript6 arrow function that returns an objectAndy Ray– Andy Ray2018-02-26 03:06:26 +00:00Commented Feb 26, 2018 at 3:06
-
Same thing, you just cant use the arrow way in vuejs for the data func since it doesnt bind this to the right thing inside the vue ObjWilomGfx– WilomGfx2018-02-26 03:08:42 +00:00Commented Feb 26, 2018 at 3:08
Add a comment
|
2 Answers
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
dataproperty (e.g.data: () => { return { a: this.myProp }}). The reason is arrow functions bind the parent context, sothiswill not be the Vue instance as you expect andthis.myPropwill be undefined.
1 Comment
Phil
FYI, a component's
data function receives the instance as the first argument so you can use data: vm => ({ myStuff: vm.stuffProp })It has something to do with ES5 or ES6 syntax, If you have used arrow functions ()=> in your previous scripts it is safe to use the following codes.
// tested and this.myData can be accessed in the component
data: () => { return {
myData: 'someData',
myStuff: this.stuffProp
} }
// this also works
data: () => ({
myData: 'someData',
myStuff: this.stuffProp
})