MVVM框架--（1）双向绑定原理

MVVM 即 Model-View-ViewModel。其中最重要的特点就是双向绑定。

    

    在之前的数据和视图关系中，比如一个输入框，我们绑定change事件，当用户输入的时候，我们可能用$().val(）获取用户输入的data，当data改变时，我们又用$().val(data)来改变视图。

    而数据双向绑定就能使data改变时自动更新view，view改变时更新data而不用我们自己去写。

问题1：view怎么监听data改变从而自身也跟着改变

             正向: 使用Object.defineProperty

             方向: input事件

首先是defineProperty在MDN上的定义:

Object.defineProperty(obj, prop, descriptor)

 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

obj：要在其上定义属性的对象。
prop：要定义或修改的属性的名称。

descriptor：将被定义或修改的属性描述符。

返回值：被传递给函数的对象。

其中descriptor中有以下参数：

configurable enumerable value writable get set

注意，如果一个对象已经有了value writable就不能再有get set，反正亦然：

如果一个描述符不具有value,writable,get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常。

其中set就是数据绑定的核心：

set

        一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。

当data发生变化，则触发set，set对数据是否发生变化进行检测，变化了则更新view。

目前MVVM框架数据绑定都是基于这个Object.defineProperty(obj, prop, descriptor)。