第3章 Vue实例核心选项

3.1　数据选项

在实例化Vue对象时，需要为Vue的构造函数提供一系列配置信息，代码如下：

当使用new操作符创建Vue实例时，可以为实例传入一个选项对象，选项对象中有很多类型的数据，具体内容如下。

3.1.1　data选项

data选项支持Object和Function类型的数据，是Vue实例的数据对象。在Vue中使用递归将data的property转换为getter/setter，从而让data的property能够响应数据变化。对象必须是纯粹的对象，代码如下：

当定义组件时，data必须声明为一个返回初始数据对象的函数。因为组件可能被用来创建多个实例，如果data仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象。通过提供data（）函数，每次创建一个新实例后，可以通过调用data（）函数，返回初始数据的一个全新副本数据对象，代码如下：

如果在自定义组件中声明的data的property使用了箭头函数，那么this不会指向这个组件的实例，不过仍然可以将其实例作为函数的第一个参数访问，代码如下：

3.1.2　props选项

props选项的值可以是数组或对象，用于接收来自父组件的数据。props可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

props选项的值如果为对象类型，则对象的语法具体使用如下。

（1）type：值的类型可以是String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数或上述内容组成的数组，可以通过该属性检查一个prop是否是指定的类型，否则会抛出警告。

（2）default：值为any类型，为该prop指定一个默认值。

（3）required：值为Boolean类型，定义该prop是否为必填项。

（4）validator：值为函数，自定义验证函数会将该prop的值作为唯一的参数代入。

props选项代码如下：

3.1.3　computed选项

computed是计算属性，其值的类型是一个对象，对象中的属性值为函数。计算属性将被混入Vue实例中，所有getter和setter的this上下文自动绑定为Vue实例。如果计算属性的值为一个箭头函数，那么this不会指向这个组件的实例，不过仍然可以将其实例作为函数的第一个参数访问。

计算属性有以下特点。

（1）模板中放入太多的逻辑会让模板过重且难以维护，使用计算属性可以让模板更加简洁。

（2）计算属性是基于它们的响应式依赖进行缓存的。

（3）computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是说多个变量中的某一个值发生了变化则我们监控的这个值也会发生变化。

index.html文件代码如下：

3.1.4　methods选项

methods用来定义Vue实例中绑定的函数，其值的类型为对象，对象的属性值必须为函数类型，methods将被混入Vue实例中。可以直接通过vm实例访问这些函数，也可以在指令中直接使用。函数中的this自动绑定为Vue实例，代码如下：

3.1.5　watch选项

watch是监听器，其值为一个对象，对象中的属性值可以为函数、对象和数组。当data中的一个属性需要被观察其内部值的改变时，可以通过watch来监听data属性的变化。

watch监听器的基本语法如下。

（1）使用watch来响应数据的变化。

（2）一般用于异步或者开销较大的操作。

（3）watch中的属性一定是data中已经存在的数据。

（4）当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够被监听到变化，此时需要deep属性对对象进行深度监听。

index.html文件代码如下：