vue定义data的三种方式与区别

1.第一种写法，对象。

var app = new Vue({
　　el: '#yanggb',
　　data: {
　　　　yanggb: 'yanggb'
　　}
})

2.第二种写法，函数。

var app = new Vue({
　　el: '#yanggb',
　　data: function() {
　　　　return {
　　　　　　yanggb: 'yanggb'
　　　　}
　　}
})

3.第三种写法，函数，是第二种写法的ES6写法。

var app = new Vue({
　　el: '#yanggb',
　　data() {
　　　　return {
　　　　　　yanggb: 'yanggb'
　　　　}
　　}
})

三种写法的区别

在简单的vue实例应用中，三种写法几乎是没有什么区别的，由于你定义的#yanggb对象不会被复用。

可是若是是在组件应用的环境中，就可能会存在多个地方调用同一个组件的状况，为了避免让多个地方的组件共享同一个data对象，只能返回函数。这个与JavaScript的做用域特性有关，函数本身拥有私有的做用域，函数之间的做用域相互独立，也就不会出现组件对数据的绑定出现交错的状况。