对 vuejs-templates webpack-simple code 片段感到困惑

Question

我是javascript的新手。

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

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

从第 25 行出发

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

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

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

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

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

请帮助我理解此代码片段。

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

Answer 1

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

在这两种情况下，您都在定义一个函数，该函数是对象文本的成员。es6中，有方法属性的功能，用作速记符号。另请参阅MDN。

Answer 2

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

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

VueJS Docs 给出了完全相同的警告：

不要在实例属性或回调上使用箭头函数(例如vm.$watch('a'， newVal => this.myMethod((((.由于箭头函数是绑定到父上下文，这将不是 Vue 实例，因为你会期望，这个.myMethod将是未定义的。

https://v2.vuejs.org/v2/guide/instance.html#Properties-and-Methods