37. Vue组件的data使用
官网说明
data 必须是一个函数
前言
上一篇章讲解了Vue组件的定义以及全局、私有创建的方式、相关注意事项。那么本篇章再来看看另一个注意点data。
在vm实例中的data是可以直接定义属性值，如下：
image-20200204122714276
但是，在组件中data如果这样定义属性值，那么就会报错。而且必须是一个函数，下面来逐步示例说明。
示例1：组件中的data定义属性值，验证是否会报错
1.首先执行类似VM示例定义data的属性值
image-20200207121324935
2.打开浏览器，查看信息
image-20200207121421953
可以从错误信息中看出，在组件中的data只能返回一个function，如果直接定义值，那么则会直接报错。
3.修改data返回一个function方法
image-20200207121725321
4.打开浏览器，查看信息
image-20200207121818430
那么是不是这样来给组件设置data就可以了呢？
其实如果这样设置的话，单个组件使用就没问题，如果多个组件使用，那么就会出现问题了。
示例2：设置一个组件被多次应用中data的数据问题
1.首先编写一个按钮，点击变化一个组件中的数据
image-20200207122814499
2.在页面只渲染一个组件，点击按钮查看数字变化
image-20200207122911366
浏览器显示如下：
image-20200207122928397
image-20200207122943652
可以看到点击按钮，数字就可以增加了。那么如果渲染多个组件，情况会怎么样呢？
3.在页面渲染组件多次
image-20200207140748196
在浏览器显示如下：
image-20200207140826662
此时，点击不同的按钮，组件之间的data数据是单独的，这是正常的。
但是有时候，data也有一种写成错误数据共享的情况。
4.将组件data设置为同一个值，这样就会出现多个组件共享值的情况
image-20200207141303696
因为data中返回的都是components_data这个数据对象，内存共享，那么在浏览器点击数据变化是同步的，如下：
image-20200207141410307
可以看到，点击一次按钮，三个组件中的值都会同时改变。
5.最好的简化写法，避免data共享就不能返回一个数据对象，应该每个组件都要return一个新的对象
image-20200207141541072
此时浏览器上的情况又回到步骤3的情况，组件拥有单独的num值，如下：
image-20200207141640416
更多精彩原创Devops文章，快来关注我的Devops社群吧：
