前面主要都是描述 Vue 初始化、首次渲染的过程，把原始的数据最终映射到 DOM 中，但并没有涉及到数据发生变化后 DOM 也跟着变化的部分。而 Vue 的数据驱动除了数据渲染 DOM 之外，还有一个很重要的体现就是数据的变更会触发 DOM 的变化。

    1. <div id="app" @click="change">
    2.     {{ message }}
    3. </div>
    1. const app = new Vue({
    2.     el: '#app',
    3.     data: {
    4.         message: 'Hello Vue!',
    5.     },
    6.     methods: {
    7.         change() {
    8.             this.message = 'Hello World!';
    9.         },
    10.     },
    11. });

    当我们去修改 this.message 的时候，模板对应的插值也会渲染成新的数据，那么这一切是怎么做到的呢？

    在分析前，我们先直观的想一下，如果不用 Vue 的话，我们会通过最简单的方法实现这个需求：监听点击事件，修改数据，手动操作 DOM 重新渲染。

    这个过程和使用 Vue 的最大区别就是多了一步 “手动操作 DOM 重新渲染”。这一步看上去并不多，但它背后又潜在的几个要处理的问题：

    1. 我需要修改哪块的 DOM？
    2. 我的修改效率和性能是不是最优的？
    3. 我需要对数据每一次的修改都去操作 DOM 吗？
    4. 我需要 case by case 去写修改 DOM 的逻辑吗？

    如果我们使用了 Vue，那么上面几个问题 Vue 内部就帮你做了，那么 Vue 是如何在我们对数据修改后自动做这些事情呢，接下来我们将进入一些 Vue 响应式系统的底层的细节。