至此分析了Vue 怎么实现数据渲染和组件化的，主要是初始化的过程，把原始的数据最终映射到 DOM 中，但并没有涉及到数据变化到 DOM 变化的部分。而 Vue 的数据驱动除了数据渲染 DOM 之外，还有一个很重要的体现就是数据的变更会触发 DOM 的变化。都知道前端开发最重要的 2 个工作，一个是把数据渲染到页面，另一个是处理用户交互。
先来看一个示例：
<div id="app" @click="changeMsg"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { changeMsg() { this.message = 'Hello World!' } } })当我们去修改 this.message 的时候，模板对应的插值也会渲染成新的数据，那么这一切是怎么实现的？
在分析前，我们先直观的想一下，如果不用 Vue 的话，我们会通过最简单的方法实现这个需求：监听点击事件，修改数据，手动操作 DOM 重新渲染。这个过程和使用 Vue 的最大区别就是多了一步“手动操作 DOM 重新渲染”。这一步看上去并不多，但它背后又潜在的几个要处理的问题：
我需要修改哪块的 DOM？我的修改效率和性能是不是最优的？我需要对数据每一次的修改都去操作 DOM 吗？我需要 case by case 去写修改 DOM 的逻辑吗？在Vue中，以上几个问题都被Vue做了封装。Vue内部的逻辑将是分析的重点
