Vue JS:数据差异(){ return {} } vs数据：() => ({ })

Question

我很好奇这两个数据函数，这两者之间有什么区别吗？

我通常看到的是

data () {
  return {
    obj
  }
}

和我通常使用的ES6“胖箭头”

data:()=>({
  obj
})

Answer 1

在您的具体示例中没有区别，但这两种表示法之间有一个非常重要的区别，特别是在涉及到this时：this不会在箭头函数中反映vue实例。

所以，如果你曾经有过这样的经历：

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

它不会像你期望的那样工作。this.stuffProp不会获得stuffProp属性的值(有关原因的更多信息，请参见下文)。

修复

将箭头函数更改为，或者(ES6/EcmaScript 2015符号)：

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

或to (常规，ES5和之前，表示法)：

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

原因

在声明Vue方法时，不要使用箭头函数(() => {})。它们从当前作用域(可能是window)中提取this，并且不会反映Vue实例。

从API Docs

请注意，您不应将箭头函数与data

(例如data: () => { return { a: this.myProp }})一起使用。原因是箭头函数绑定了父上下文，因此this不会像您预期的那样是Vue实例，而this.myProp将是未定义的。

Answer 2

它与ES5或ES6语法有关，如果您在前面的脚本中使用过箭头函数()=>，那么使用以下代码是安全的。

​

// 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
})

​