vue.js的data属性问题

Question

下面的demo中，data属性的两种写法分别在什么时候使用？一个是return出来，一个是直接写一个数组。

 new Vue({
    el: "#app",
       data: function () {
          return {
             items: []
          }
       }
 });

 new Vue({
    el: "#app",
       data: {
         items: []                
       }
 });

Answer 1

组件的定义只接受 function。

同时，注意，不应该对 data 属性使用箭头函数 (例如data: () => { return { a: this.myProp }})。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.myProp 将是 undefined。

文档
http://cn.vuejs.org/v2/api/#data

Answer 2

推荐使用 vue-class-component 插件，就不用纠结了，而且风格也和 js 的class一样。

vue-class-component

给你放一段代码感受一下。

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
})
export default class App extends Vue {
  // 这里就相当于 data 里的属性
  msg = 123

  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage

  // lifecycle hook
  mounted () {
    this.greet()
  }

  // computed
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method
  greet () {
    alert('greeting: ' + this.msg)
  }
}
</script>