vue数据的双向绑定的原理：MVVM原理

MVVM原理
es5 object.definaProperty()

MVVM;
M改变 v视图 vm自动刷新
当你把一个js里面的object传入vue实例的data选项中，vue会遍历次对象中的所有property，并使用object.definaProperty把property全部转为getter/setter Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。

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

为什么要用vdom？
网页加载过程
加载dom树 —> 加载css树—>加载render树–>gpu渲染 图显示出来
网页 操作dom 性能消耗 比较大
vue mvvm 数据变了 视图自动刷新
刷新：需要有一个 比较好的 机制 （尽量减少dom操作）

vue框架构建项目，在初次渲染时，在 dom加载完成后，生成一个虚拟dom树，缓存起来，后面我们数据更新之后，不是直接更新dom，而是先生成一个虚拟dom树，跟上一次缓存起来的虚拟dom进行比较（diff算法），通过算法比较后，得到最优（最少操作dom的方案）,根据这个方案去更新真实dom
循环key（每一层元素加一个独一无二的标志相当于电影院座位号）: 提高 diff算法比较虚拟dom 的 速度，提高网页加载速度