Vue JS:data(){return {}}与data :()=>({})的区别

Question

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

我经常看到的是

data () {
  return {
    obj
  }
}

和我通常使用的ES6"胖箭"

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文档:

请注意,不应对data属性使用箭头函数(例如data: () => { return { a: this.myProp }}).原因是箭头函数绑定父上下文,因此this不会像您期望的那样是Vue实例,并且this.myProp将是未定义的.