在創建或註冊模板的時候，傳入一個data屬性作為用來綁定的數據。但是在組件中，data必須是一個函數，而不能直接把一個對象賦值給它。
Vue.component(‘my-component‘, {
  template: ‘<div>hello Vue</div>‘,
  data() {
    return {} // 返回一個唯一的對象，不要和其他組件共用一個對象進行返回!!!
  },
})

你在前面看到，在new Vue()的時候，是可以給data直接賦值為一個對象的。這是怎麽回事，為什麽到了組件這裏就不行了。

實際上，它首先需要創建一個組件構造器，然後註冊組件。註冊組件的本質其實就是建立一個組件構造器的引用。使用組件才是真正創建一個組件實例

var MyComponent = function() {}
MyComponent.prototype.data = {
  a: 1,
  b: 2,
}
// 上面是一個虛擬的組件構造器，真實的組件構造器方法很多
var componentA = new MyComponent()
var componentB = new MyComponent()
// 上面實例化出來兩個組件實例，也就是通過<my-component>調用，創建的兩個實例
componentA.data.a 
 
=== componentB.data.a // true
componentA.data.b = 5
componentB.data.b // 5

可以看到上面代碼中最後三句，這就比較坑爹了，如果兩個實例同時引用一個對象，那麽當你修改其中一個屬性的時候，另外一個實例也會跟著改。這怎麽可以，兩個實例應該有自己各自的域才對。所以，需要通過下面方法來進行處理：

var MyComponent = function() {
  this.data = this.data()
}
MyComponent.prototype.data = function() {
  return {
    a: 1,
    b: 
 
2,
  }
}

這樣每一個實例的data屬性都是獨立的，不會相互影響了。所以，你現在知道為什麽vue組件的data必須是函數了吧。這都是因為js本身的特性帶來的，跟vue本身設計無關。

Vue 組件 data為什麽是函數