Question

我是javascript的新手。

通过阅读示例开始学习Vue.js。

但我对vuejs-templates/webpack-simple的代码段感到困惑。

  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }

我想知道为什么代码不能像这样编写

  data: () => {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }

我尝试了两个代码，结果相同。

通过阅读Vue.js文档，我无法理解。

请帮助我理解这段代码。

感谢您抽出时间阅读我的问题。

Answer 1

问题不在于为什么不是，而在于为什么要。

在这两种情况下，您都定义了一个函数，它是对象文字的成员。 es6中有method properties的功能，用作速记符号。另请参阅MDN。

Answer 2

我建议您在方法属性上使用箭头功能时要小心。

箭头函数提供了词法this，所以有时您可能会发现自己处于this没有引用正确上下文的情况下（它应该是Vue对象本身但它对父对象有意义，在你的情况下可能是窗口）。

VueJS Docs给出了相同的警告：

不要在实例属性或回调上使用箭头函数（例如 vm。$ watch（＆＃39; a＆＃39;，newVal =＆gt; this.myMethod（）））。正如箭头功能一样绑定到父上下文，这将不是Vue实例你期望和this.myMethod将是未定义的。