33. 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