Vue 組件 data為什么是函數

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

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

實際上，它首先需要創建一個組件構造器，然后注冊組件。注冊組件的本質其實就是建立一個組件構造器的引用。使用組件才是真正創建一個組件實例。所以，注冊組件其實並不產生新的組件類，但會產生一個可以用來實例化的新方式。理解這點之后，再理解js的原型鏈：

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本身設計無關。