vue中的data为什么是一个函数？

• 因为组件是用来复用的，且 JS 里对象是引用关系，
• 如果组件中 data 是一个对象，那么这样作用域没有隔离，
• 子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，
• 那么每个实例可以维护一份被返回对象的独立的拷贝，
• 组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，
• 是不会被复用的，因此不存在引用对象的问题。

例子一：

function Component() {
    
    }
Component.prototype.data = {
    
    
  name: "jack",
  age: 22,
};
var componentA = new Component();
var componentB = new Component();
componentA.data.age = 55;
console.log(componentA, componentB);

• 输出的结果是:
• Component {} Component {}
• 解释:
• 此时，componentA 和 componentB data之间指向了同一个内存地址，
• age 都变成了 55， 导致了问题！

代码实例二：

function Component() {
    
    
  this.data = this.data();
}
Component.prototype.data = function () {
    
    
  return {
    
    
    name: "jack",
    age: 22,
  };
};
var componentA = new Component();
var componentB = new Component();
componentA.data.age = 55;
console.log(componentA, componentB);

输出的结果是:
Component { data: { name: ‘jack’, age: 55 } }
Component { data: { name: ‘jack’, age: 22 } }