Vue JS：数据（）{返回{}}与数据的区别：（）=>（{}）

Question

我很好奇这两个数据函数，这两者有什么区别。

我平时看到的是

data () {
  return {
    obj
  }
}

还有我常用的 ES6“胖箭头”

data:()=>({
  obj
})

Answer 1

这与 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
})

Answer 2

在您的具体示例中没有区别，但是这两种表示法之间有一个非常重要的区别，特别是在涉及 Vue.js 时：this 不会 strong> 在箭头函数中反映 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
      }
    }
}

或到（正则，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 将是未定义的。