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

Question

I am a newbie of javascript.

Start to learn Vue.js by reading the examples.

But I am confused about the code snippet of vuejs-templates/webpack-simple .

From line 25

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

I am wondering why code can't be written like this

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

I have tried both code, the same result.

I can't understand from reading Vue.js document.

Please help me to understand this code snippet.

Thank you for taking time reading my problem.

Answer 1

The question is not about why it isn't , but more about why should it .

In both cases, you are defining a function, which is member of an object literal. In es6 there is the feature of method properties , which is used as a shorthand notation. See also MDN .

Answer 2

I'd suggest you to take care when you want to use arrow functions over the method properties.

Arrow functions provides the lexical this so sometimes you could find yourself in situation where this doesn't refer to correct context (It should be Vue object itself but it pointent to parent object, in your case probably window).

VueJS Docs gives pretty same warning:

Don't use arrow functions on an instance property or callback (eg vm.$watch('a', newVal => this.myMethod())). As arrow functions are bound to the parent context, this will not be the Vue instance as you'd expect and this.myMethod will be undefined.

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