Vue组件中，data为什么必须是个函数，而不是对象 vue组件

今天学习vue组件的时候，发现组件里面的东西，其实和定义的root实例里面的东西时一样的，除了data。这个data必须是function类型，而且必须返回一个实例对象的值，里面的值就是定义的data。这是为什么呢下面举一个小例子来类比一下
正确的定义一个组件：

//定义组件 //使用组件 //注册组件 const appbox = new Vue({ el:".app", data:{ msg:'haha' }, components:{ cpnText:{ template:'#cpn', data(){ return { name:'小小的一个组件' } } } } })

效果：

文章图片

【Vue组件中，data为什么必须是个函数，而不是对象】但是如果将组件的data写成：

data:{ name:'小小的一个组件' }

会报这样的错误：

文章图片

分析如果data允许这么写，那么就像所有复用这个组件的地方，都在使用这个组件里面的唯一一个data，所有使用组件的地方的data都会指向栈内这一个data的地址，那么会造成一个改data的值，所有的data都会改，因为vue中如果直接写成像root实例当中data那样会直接报错，那么可以转换一下思路，重新将组件中的这一情况类比成一下这种情况:

//使用组件 //注册组件 const obj = { name:'我是一个小小的组件' }//定义一个存放数据的对象，假设这里就是data:{} const appbox = new Vue({ el:".app", data:{ msg:'haha' }, components:{ cpnText:{ template:'#cpn', data(){ return obj; //这里类比只有一个data对象 }, methods:{ change(){ this.name = '一个改变了的组件' } } } } })

效果：

文章图片

点击改变

文章图片

如果返回实例对象

//使用组件 //注册组件 const appbox = new Vue({ el:".app", data:{ msg:'haha' }, components:{ cpnText:{ template:'#cpn', data(){ return { name:'我是一个小小的组件' } }, methods:{ change(){ this.name = '一个改变了的组件' } } } } })

文章图片

总结当我们开发人员使用组件的时候，肯定希望各个部分除了基本功能通信，自己基本的值不会变，比如一个轮播组件，一个页面需要两个轮播，但是你在因为自己的需求改变第一个轮播组件其中的某些data值的时候，另外一个也跟着改变了，这就会出现很多矛盾和错误，所以为了避免这种情况的发生，VUE组件当中将data 编写为定义的时候需要以函数的形式出现，而且必须返回一个实例对象的值。
因为返回实例对象的值的时候，如果你每次都复用一次，在内存栈里面会另外开辟一片内存空间，每个组件指向的数据栈是不同的，这样就实现了互不影响，如果改变一个的值，那么另外的组件根本不会收到影响。而不是都指向同一个内存地址，影响其他组件的使用