<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对象，只能返回函数。function有作用域，所以别的组件访问不了。
原文：https://www.cnblogs.com/yangai/p/9663344.html