Vue 实例中的 data 属性究竟应该如何表示？

Question

很简单的一段代码

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    <span>{{count}}</span>
    <button @click="inc">+</button>
</div>
<script>
var app = new Vue({
  // 1.
  // data () {
  //   return {count: 0}
  // },

  // 2.
  // data: {
  //   count: 0
  // },

  // 3.
  data: function() {
    return {
      count: 0
    }
  },

  methods: {
    inc () {this.count++}
  }
})
app.$mount('#app')
</script>

能运行。看我注释部分，官网 guide 示例应该用的是 2，但是 1 和 3 为何也能执行？它们和 2 表示的应该不是一个东西吧？求指导

Answer 1

首先，1是3的语法糖，是新的ES6语法，和3一摸一样。

然后1和2在官方文档上都有例子，区别也解释得很清楚。简而言之，在app = new Vue对象时，没什么区别，因为你app对象不会被复用。但是在组件中，因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，只能返回函数。

官方文档比我说的更详细：https://vuejs.org/v2/guide/co...

Answer 2

这是前端mvvm框架的典型问题，data的类型大概是这样的 object|function，在一些需要把初始状态提取为公用时用function，这样保证初始状态的“不可变”

1和3其实是一个意思，1是ES6对对象的扩展。