Vue2 实例中的 data 属性三种写法与作用

<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>

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

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