Vue 組件 data爲何是函數？

在建立或註冊模板的時候，傳入一個data屬性做爲用來綁定的數據。可是在組件中，data必須是一個函數，而不能直接把一個對象賦值給它。

Vue.component('my-component', {
  template: '<div>OK</div>',
  data() {
    return {} // 返回一個惟一的對象，不要和其餘組件共用一個對象進行返回
  },
})

你在前面看到，在new Vue()的時候，是能夠給data直接賦值爲一個對象的。這是怎麼回事，爲何到了組件這裏就不行了。

你要理解，上面這個操做是一個簡易操做，實際上，它首先須要建立一個組件構造器，而後註冊組件。註冊組件的本質其實就是創建一個組件構造器的引用。使用組件纔是真正建立一個組件實例。因此，註冊組件其實並不產生新的組件類，但會產生一個能夠用來實例化的新方式。

理解這點以後，再理解js的原型鏈：

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

var component1 = new MyComponent()
var component2 = new MyComponent()
// 上面實例化出來兩個組件實例，也就是經過<my-component>調用，建立的兩個實例

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,
  }
}

這樣每個實例的data屬性都是獨立的，不會相互影響了。因此，你如今知道爲何vue組件的data必須是函數了吧。這都是由於js自己的特性帶來的，跟vue自己設計無關。其實vue不該該把這個方法名取爲data()，應該叫setData或其餘更容易當即的方法名。