为什么Vue组件里面data必须是个函数

Vue组件里面data必须是个函数

**首页我们先了解一个原形和原型链，每个js对象和js方法都有一个原形，js对象的是隐式原形 proto，而方法中的是显示原形prototype，下面举个例子:

export default {
  name:'component',
  data: {
  	a: 1,
  	b: 2
  },
  methods:{
  }
}
// 其实底层是
component._proto_.data={
　　a:1,
　　b:2
}
//而var obj = {}底层是var obj = new Object()
//所以component._proto_._proto_，第一个是继承data，第二个继承Object，data不只是有data属性还包含Object属性

**因为咱们封装的组件是可复用的，如果一个地方用到这个组件，其他地方也用这个组件，那样大家的继承都是一样的，只要一个地方的组件属性修改了，其他地方也会被修改，这个肯定不是我们想要的，也是很恐怖的，那用函数之后会是什么样的那，看下面一个例子：

export default {
  name:'component',
  data: function () {
  	return {
  		a: 1,
  		b: 2
  	}
  },
  methods:{
  }
}
//其实底层是这样的
var component=function(){
　　this.data=this.data();//每次调用这个函数生成新的js对象
}
component.prototype.data=function(){
　　return {
　　　　a:1,
　　　　b:2,
　　}
}

**这个才是我们想要的效果，所以组件的data必须要用函数