对 vuejs-templates webpack-simple 代码片段感到困惑答案

【问题标题】：Confused about vuejs-templates webpack-simple code snippet对 vuejs-templates webpack-simple 代码片段感到困惑
【发布时间】：2017-08-17 00:51:24
【问题描述】：

我是 javascript 的新手。

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

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

来自line 25

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

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

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

两种代码我都试过了，结果一样。

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

请帮我理解这段代码sn-p。

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

【问题讨论】：

两者是同一个东西，第一个实际上是第二个的简写。
@abhishekkannojia 谢谢。

标签： javascript vue.js vue-component

【解决方案1】：

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

在这两种情况下，您都在定义一个函数，它是对象字面量的成员。在es6 中有method properties 的特性，它被用作速记符号。另见MDN。

【讨论】：

对不起，我不熟悉es6 语法。现在我明白了，谢谢。

【解决方案2】：

当你想在方法属性上使用箭头函数时，我建议你小心。

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

VueJS Docs 给出了相同的警告：

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

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

【讨论】：

感谢您的提醒。我也在文档上看到了。