2.1.3 data和methods配置项

在通过createApp创建应用对象时，需要为其指定一个配置对象，这个配置对象中有两个基本的配置项，分别是data和methods。下面我们就对这两个配置项进行具体讲解。

首先来讲解data配置项。它的值必须是函数，且返回一个包含n个可变属性的对象，我们一般称此对象为data对象。此对象中的属性，我们常称为data属性。在模板中可以读取任意data属性进行动态显示。

然后来讲解methods配置项。它是一个包含n个方法的对象。在方法中用户可以通过this.xxx来读取或更新data对象中对应的属性。当更新了对应的data属性后，页面会自动更新。

有一点需要特别说明，data函数和method方法中的this，本质上是一个代理（Proxy）对象。它代理了data对象中所有属性的读/写操作。也就是说，用户可以通过this来读取或更新data对象中的属性。在methods对象中定义的所有方法最终也会被添加到代理对象中，同理，也可以在方法中通过this来更新data属性，从而触发页面自动更新。至于模板中的表达式读取变量或函数，本质上也都是从代理对象上查找的。

下面通过一段代码对data函数和methods对象进行具体演示，这里建议读者也对下方代码的运行效果进行思考。

运行代码，初始页面效果如图2-5所示，2秒后界面上的count属性值从0更新显示为2，4秒后更新显示为3。

图2-5 初始页面效果

在上面的代码中，我们设置了2个定时器，分别在2秒和4秒后调用，2秒后将data对象中的count属性值进行更新（增加2），4秒后调用vm的方法更新count属性值（增加3）。这部分内容比较简单，不再对其做详细讲解。

值得一提的是，上面的代码在data函数中输出了this来验证前面提到的“data对象中的所有属性都在代理对象上”和“methods对象中的方法会成为代理对象的方法”，具体来看控制台输出的结果，如图2-6所示。

图2-6 data函数中输出的代理对象

这里只对控制台输出的部分结果进行截取，在其中我们可以清晰地看到，代理对象中确实有data对象中的属性count和methods对象中的方法updateCount（具体见图2-6中的矩形框）。这也充分验证了我们之前的说法。