应用里面的数据我们可以把它们放在 data 这个选项里 ... Vue 会处理在这个选项里找到的属性，让它们变得 reactive .. 下面我们去做几个实验，理解一下什么是 reactive ...

先定义一个数据 .. 名字可以是 dataSource ... 它的值可以是来自外部的某个地方，比如可以是请求应用的 API 以后给我们返回来的数据 ..

它可以是一个对象 ... 里面随便添加一些属性 ... 比如 message ... 把它的值设置成 hello ... 然后把这个数据源交给 Vue 实例的 data 选项，添加一个 data .. 对应的值使用上面定义的这个 dataSource 来表示 ..

在这个应用挂载到的元素里面，我们可以用一下模板输出应用里的 message ...

在页面上现在会显示 message 表示的值 ... 就是这个 hello ..

在浏览器的控制台上看一下 dataSource .. 这个数据源已经被 Vue 处理过了 .. 它里面的属性会被转换成读取器还有设置器，比如它有个 message 属性 .. 你会发现，这里会出现对应的 get message 方法，还有 set message 方法 ..

这个 dataSource 应该跟 Vue 实例里面的 $data 属性是一样的 ..

可以判断一下 .. 看看它是不是等于这个数据源 .. 结果是 true ..

得到 message 的值，可以这样 vm.$data.message .. 或者可以直接使用这个属性的读取器方法 .. vm.message ..

设置这个属性的值可以直接用一下 vm.message = 'hola'

看一下数据源里面的 message .. 结果也会是这个新设置的值 .. 然后我们可以通过这个数据源再去设置这个属性的值 ...

然后再看一下实例下面的 message ... 结果也变成了使用数据源设置的这个新的值 ...

$watch

使用 $watch 这个实例方法，我们可以监视属性的值的变化，用一下 vm 的 $watch 方法，监视一下 message 这个属性的值 ... 第二个参数是一个方法 .. 有两个参数，一个是 newValue 表示属性的新的值 ... 第二个参数是 oldValue，它是属性的原有的值 ...

然后在控制台上输出这个 newValue，还有 oldValue ... 先看一下 message 的值 ... 现在是 hello ... 然后再设置一下它的值 ...

在控制器上显示的，这个 hola 就是 message 属性的新的值 .. 后面的 hello 是它原有的值 ..