vue组件中的data为什么是一个函数?

为什么data为什么是一个函数而不是一个对象？

原因是因为如果data是一个对象的话，两个组件中设置的data都会引用同一个内存地址，而用函数的话，则会在每次引用的时候返回一个新的地址。

如果使用对象形式定义data的话，就会导致创建的对象身上的data属性会指向同一个地址：

var Component = function () {};
Component.prototype.data = {
            message: '10'
}
var component1 = new Component(), component2 = new Component(); 
component1.data.message = '20'; 
console.log(component2.data.message);
输出是：20

 

实例和组件定义data的区别：

vue实例定义data属性既可以是对象，也可以是函数。而组件中定于data属性，就只能是一个函数。组件中如果改成函数形式的话会报错的。

 

vue中data为什么必须是个函数?

1.Vue 中的 data 必须是个函数，因为当data是函数时，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。

简单来说，就是为了保证组件的独立性和可复用性，如果data是个函数的话，每复用一次组件就会返回新的data，类似于给每个组件实例创建一个私有的数据空间，保护各自的数据互不影响。

2.一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。