为什么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 的实例,是不会被复用的,因此不存在引用对象的问题。