Vue中的双向数据绑定、MVVM模式

什么是双向数据绑定

首先要知道什么是单向数据绑定，单向数据绑定就是把Model绑定到View

什么是双向数据绑定？当我们用javaScript代码更新Model时，View就会自动更新，在单向数据绑定的基础上，用户更新了View，Model的数据也会自动被更新，这种情况就是双向数据绑定

双向数据绑定的原理？

        在了解这些之前，必须要知道什么时MVVM模式

        MVVM是一种设计思想，它是Model-View-ViewModel的简写，他也是MVC的增强版

                1.Model是代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑

                2.view是代表UI组件，它负责将数据模型转化为成UI展现出来

                3.ViewModel是一个同步View和Model的对象

        ViewModel的主要职责：

                1.数据变化更新视图

                2.视图变化后更新数据

        当然，它还有两个主要部分组成

                1.监听器(Observer)：对所有数据的属性进行监听

                2.解析器(Compiler)：对每个元素节点的指令进行扫码跟解析，根据指令模板替换数据，以及绑定相应的更新函数

Vue双向数据绑定原理

        Vue是采用数据劫持结合发布者-订阅者模式的方式，通过使用ES5中Object.defineProperty()方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

双向绑定的实现步骤：

        1.创建Vue实例时，在data属性中定义需要双向绑定的数据

        2.在模板中使用v-model指令输入控制绑定到数据属性上(在Vue内部，使用Object.defineProperty()方法将数据属性转换为getter/setter形式，从而实现数据的响应变化)

        3.当输入控件的值发生变化时，Vue会自动调用数据属性的stter方法，从而更新数据的值

        4.当数据的值发生变化时，Vue会自动更新相关的DOM元素，从而实现数据与视图的双向数据绑定