修复

Question

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

我通常看到的是

data () {
  return {
    obj
  }
}

和ES6＆＃34;胖箭＆＃34;我通常使用

data:()=>({
  obj
})

Answer 1

您的具体示例没有区别，但这两种符号之间存在非常重要差异，特别是在Vue.js时： 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
      }
    }
}

或（常规，ES5及之前，表示法）：

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

的原因

声明Vue方法时，请勿使用箭头函数（() => {}）。他们从当前范围（可能this）中选取window，并且不会反映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
})

Vue JS：数据差异（）{return {}} vs data :(）=＆gt; （{}）

2 个答案:

修复

的原因