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的做用域特性有關，函數本身擁有私有的做用域，函數之間的做用域相互獨立，也就不會出現組件對數據的綁定出現交錯的狀況。