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

对象，只能返回函数。