上一节学习了Vue中的代理，知道了Vue中代理数据和方法，今天我们接着来了解Vue中的响应式。我们将使用上一篇中的示例来继续介绍Vue中响应式相关的知识。同样的，将大部分的时间用在浏览器的控制台上。

<div id="app">
    <h1>Hello! {{ firstName }}</h1>
</div>

let app = new Vue({
    el: '#app',
    data () {
        return {
            firstName: '大漠',
            lastName: 'W3cplus'，
            axisX: 1,
            axisY: 2
        }
    },
    methods: {
        fullName: function () {
            console.log( this.firstName + '_' + this.lastName )
        }
    },
    computed: {
        axisZ: function () {
            return this.axisX + this.axisY
        }
    }
})

让我们输出Vue实例上的$data属性。

在这里，我们可以看到Vue自动添加了响应式getter和setter。当你在实例化一个Vue实例时传入一个data对象时，Vue会遍历所有属性并将它们转换为getter和setter。当你使用Vue时，这是完全透明的，除非你深入到Vue的内部工作中，否则你不会注意到这个。

那么这些getter和setter是什么意思呢？简单地说，它们就是当数据属性发生变化时DOM会更新的原因。使用这些响应式，Vue可以检测何时更改，以及何时访问属性。最重要的是，它们允许Vue跟踪数据属性之间的依赖关系。

为了更详细地讲一下，我准备了一张图，用这张图来说明我刚才所说的。

首先，我们有包含每个数据属性的getter和setter函数的数据。当调用setter时，它为数据属性设置一个新值，并通知一个观察者，它被挂载到Vue实例上。这个观察者负责对数据变化做出响应。当某些东西发生变化时，它通过调用渲染函数来触发模板重新渲染，这个函数基本上是一个负责重新渲染一个Vue实例或组件的函数。这对我们来说，并不重要，所以也不在这里阐述过多，但重要的是重新渲染模板。当渲染或处理模板时，会更新所谓的虚拟DOM。这也是DOM更新之前的步骤。而这里其中的原理，我们后续再深入学习。当渲染时，数据属性会被“触摸”，这意味着getter函数被调用。