vue的数据绑定原理

Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。在这个章节，我们将研究一下 Vue 响应式系统的底层的细节。

https://cn.vuejs.org/v2/guide/reactivity.html
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍
历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转
为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，
这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接
触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知
watcher，从而使它关联的组件重新渲染。

注意：vue3 的 变化
Object.defineProperty有以下缺点。
1、无法监听es6的Set、Map 变化；
2、无法监听Class类型的数据；
3、属性的新加或者删除也无法监听；
4、数组元素的增加和删除也无法监听。

针对Object.defineProperty的缺点，ES6 Proxy都能够完美得解决，它唯一的缺
点就是，对IE不友好,所以vue3在检测到如果是使用IE的情况下（没错，IE11都不
支持Proxy），会自动降级为Object.defineProperty的数据监听系统。