轻松了解Vue的数据监听

我们使用过vue都知道，vue的数据是双向绑定的，Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。典型的例子就是v-model。
其中，View 变化更新 Data ，可以通过事件监听的方式来实现，所以 Vue 的数据双向绑定的工作主要是如何根据 Data 变化更新 View。于是乎：
问vue实现双向绑定，拢共分几步？
分四步：

• 第一步实现事件监听Observe：通过Object.defineProperty()对对象的属性遍历，包括子对象的属性，为他们添加getter/setter，这样在他们数据改变的时候就可以触发setter操作了
• 第二步实现对模板的编译Compile：将模板中的变量都转化成数据，渲染到页面上，给每个指令对应的节点绑定一个更新函数，添加监听数据的订阅者，利用订阅者进行更新。
• 第三步实现一个订阅者Watcher，Watcher作为Observe和Compile之间沟通的桥梁，订阅 Observer 中的属性值变化的消息，只要有数据改变，Watcher就是通知Compile触发更新函数将对应值更新
• 第四步实现一个订阅器Dep：Dep采用的模式是：发布 — 订阅 ，对所有的Watcher进行收集，然后对Wacher和Observe统一管理。

以上是对某个属性的更新，那么对整个对象和数组又是如何处理呢？
由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

对于对象

由于vue在初始化的时候，都会对属性执行getter setter转化，所以我们必须把属性写在data对象中，才能将他转化为响应式的。
对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如，对于：

Vue.set(vm.someObject, 'b', 2)

您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名。

我们来具体操作一下，假如现在的页面是这样的