Vue組件里面data為什么必須是個函數

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

export default {
  name:'app',
  data(){
    return {

    }
  },
  methods:{
  }
}
上面的組件，是一個簡易操作，實際上它首先需要創建一個組建構造器，然后注冊組件，注冊組件的本質其實就是建立一個組件構造器的引用，使用組建才是真正創建一個組件實例。所以，注冊組件其實並不產生新的組件類，但會產生一個可以用來實例化的新方式。

理解這點之后，再理解js的原型鏈：
var MyComponent=function(){}
MyComponent.prototype.fata={
　　a:1,
　　b:2
}
上面是一個虛擬的組件構造器，真是的組件構造器方法很多。
var component1=new MyComponent();
var component2=new MyComponent();
上面代碼實例化出來兩個組件實例，也就是通過<my-component>調用，創建兩個實例（vue里面組件可以在任何地方多次當子組件引入）。
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()更形象。