为何组件的data必须是一个函数

为何组件的data必须是一个函数

在Vue实例中，data可以是一个对象也可以是一个函数

new Vue({
	//data可以是一个对象
	data:{
		messsage:"hello world"
	}，
	//data也可以是一个函数
	data(){
		return {
			message:"hello world"
		}
	}
})

组件中如果使用data必须写成函数

	Vue.component('cpn',{
		template:"#tem",
		data(){
			return {
				message:"hello world"
			}
		}
	})

如果组件中的data定义成了对象，则会直接报错

	Vue.component('cpn',{
		template:"#tem",
		data:{
			message:"hello world"	
		}
	})

[Vue warn]: "data"选项应该是一个函数，在组件定义中返回每个实例的值。

上面讲到组件data必须是一个函数，不知道大家有没有思考过这是为什么呢？

• 我们都知道对象是一个引用数据类型，当多次使用同一个组件时，实际上引用的是同一个地址，这样一旦某一个组件数据发生更改，那么会直接影响到其他组件数据，不利于组件的复用，而函数形式则可以避免这种现象的发生，函数中每一次都会返回一个全新的对象，这样多次使用组件时，每一次都是一个全新的对象地址，不会发生数据同步问题
• 我们可以通过下面的例子来具体的了解其中的原理

//我们先定义一个构造函数
 function Component(){
 	
 }
 //在该构造函数的原型上添加一个属性保存对象
 Component.prototype.data = {
 	name:"张三"
 }
 //创建两个实例
 let a = new Component()
 let b = new Component()
//修改a实例的name属性
a.data.name = '李四'
//打印a和b的name属性
console.log(a.data.name) // 李四
console.log(b.data.name) // 李四
//我们会发现两个name都修改成了李四

产生这样的原因这是两者共用了同一个内存地址，a修改的内容，同样对b产生了影响
如果我们采用函数的形式，则不会出现这种情况

	//我们先定义一个构造函数
 function Component(){
 //为了访问data属性，所以我们将data函数内容赋值到data属性中
 	this.data = this.data()
 }
 //在该构造函数的原型上添加一个属性保存对象
 Component.prototype.data = function (){
 	return {
 		name:"张三"
 	}
 }
 //创建两个实例
 let a = new Component()
 let b = new Component()
//修改a实例的name属性
a.data.name = '李四'
//打印a和b的name属性
console.log(a.data.name) //李四
console.log(b.data.name) //张三

修改a组件data属性的值，b中的值不受影响

总结

• 根组件因为是单例模式(可以理解为只有一个),所以使用对象或者函数都可以，不会产生数据污染
• 组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象