Vue 数据双向绑定的原理 : Object.definePro

Vue 采用 数据劫持结合发布者-订阅者模式 的方式来实现数据的响应式，通过Object.defineProperty 来劫持数据的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。
用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

Vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile 和 Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用 watcher 搭起 observer 和 Compile 之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

Vue 无法检测到对象属性的添加 或 删除 (如data.tmpObj.ts = 1)， 因为通过 Object.defineProperty 来将对象的key转换成 getter / setter 的形式来追踪变化，但 getter / setter 只能追踪一个数据是否被修改，无法追踪新增属性和删除属性。如果是删除属性，我们可以用 vm.$delete 实现，可用以下方法:

1. 可以使用 Vue.set(tmpObj , ts, 1) 方法向嵌套对象添加响应式属性;
2. 也可以给这个对象重新赋值，比如 data.tmpObj = {...data.tmpObj , ts:1}