Vue中的底层原理

1数据驱动

当数据发生改变时，视图也会进行更新，这叫做数据驱动，也就是数据驱动视图

2深入响应式原理

数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新

3双向数据绑定原理

当我们使用 v-model 指令绑定了表单元素时，那么我们可以在视图直接获得数据，当视图发生改变时，数据也会进行

三者都是应用了同一个底层原理，这个底层原理由es5的 Object.defineProperty 属性来提供

利用了数据劫持和事件的发布订阅来实现双向数据绑定，当我们在vue data选项中定义数据时，vue会通过观察者对象（ observer ）将data选项中的所有key，经过Object.defineProperty 的getter 和setter进行设置，当我们通过 v-model指令绑定元素时， 自动触发getter,getter会返回一个初始值，这样我们在视图中就可以看到数据了，当视图中内容改变时，会触发setter,setter会通知vue，视图已经进行了更新，vue会重新生成 虚拟DOM , 继而通过 新旧 虚拟DOM 对比

首先我们用js来创建一个对象，Object.defineProperty来读取这个对象，并为其添加属性和属性值，例如下面的代码：

   let obj = {}
      Object.defineProperty(obj, 'a', { value: 1 })
      console.log(obj) //{a:1}

可以看到控制台输出了一个对象{a:1}