Vue双向数据绑定的理解

一、什么是MVVM框架

   所谓MVVM，是Model - View - ViewModel 的简写。

   我的理解是

页面上所看到的就是View。
使用Vue.js或者是其他MVVM框架，是在操作ViewModel，实现View - ViewModel的双向互动。
然后Model就是服务器的资源，ViewMdoel从服务器请求数据，或者发送数据给服务器，就是ViewModel - Model的双向互动。

二、双向数据绑定的原理

    双向数据绑定，双向指的是两个方向。

    一是数据驱动页面，

    二是页面改动了，会响应式的改变绑定的数据。主要是input的变动。

    绑定说的是MVVM框架，自动的去完成数据的改动，页面的渲染。

    不像以前，改变页面上的一个值，要先去获取该元素的节点，然后再去设置它的文本内容（比如innerHTML属性）。

    那么更具体的讲，具体实现主要使用的是，或者说细节是：

    1.Object.defineProperty属性。这是MVVM框架的核心API。

    2.观察者设计模式

    利用Object.defineProperty这个API实现了对Data每个属性的监听和回调。

    数据驱动页面方向：就是当去修改Data某一个属性时，会通知观察者，然后观察者触发自身的回调函数，进而重新渲染页面。

    页面 =》 数据：其实就是去监听input的oninput事件。oninput事件会去修改对应的Data的属性值。