看vue文檔時，一開始給的簡單實例中data都是對象建立，如

data: {
  a:1,
  b:2
}

但是到了組件內(nèi)容就明確強調(diào)了一點data必須是函數(shù)

data () {
  return {
    a: 1,
    b: 2,
  }
}

這主要的原因是JS原生中，如果在原型鏈中如果，如果定義成對象，在后面的實例中，一個實例對象的值有了變化，會影響所有的實例。
通過函數(shù)的形式，可以使得每個實例獨立，這樣數(shù)據(jù)變化也就不會影響其他實例。
對比下面兩種實例創(chuàng)建后的效果

var MyComponent = function() {}
MyComponent.prototype.data = {
  a: 1,
  b: 2,
}
// 上面是一個虛擬的組件構(gòu)造器，真實的組件構(gòu)造器方法很多

var component1 = new MyComponent()
var component2 = new MyComponent()
// 上面實例化出來兩個組件實例，也就是通過<my-component>調(diào)用，創(chuàng)建的兩個實例

component1.data.a === component2.data.a // true
component1.data.b = 5
component2.data.b // 5

var MyComponent = function() {
  this.data = this.data()
}
MyComponent.prototype.data = function() {
  return {
    a: 1,
    b: 2,
  }
}
component1.data.a === component2.data.a // true
component1.data.b = 5
component2.data.b // 2

所以data要設(shè)置成函數(shù)

引用自 https://segmentfault.com/q/1010000006242139的 李愛國 的答案