双向数据绑定的原理

双向数据绑定的原理

首先我们来理解一下什么是双向，如下图所示，当服务端中的数据发生改变，也就是data(Model)发生改变，View就会发生改变，这是正向的。当View层有数据发生改变的时候，那就触发相应的data（Model）层改变，这是反向的。那么这就是双向的。

那么他们是怎么做到view层改变data就改变的，data改变View就改变的呢，这中间其实就是view-modle层来进行监控处理的。主要用的是es5中的Object.defineProperty的API来监听数据的变化，从而刷新视图。

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
其中有两个属性，get和set属性，get是用户读取数据的时候触发，set是数据改变或设置时触发，当数据发生改变的时候就会自动触发set方法，该方法接受唯一的参数，即改变后的数据。
Object.defineProperty() 的语法

Object.defineProperty(obj, prop, descriptor)
/**
* obj：要在其上定义属性的对象。
* prop：要定义或修改的属性的名称。
* descriptor：将被定义或修改的属性描述符。
**/

例如想要更改一个对象的属性值，如下

        var vm = {}
        var data = {
            name: '哈哈哈'
        }
 
        Object.defineProperty(vm, 'name', {
             get: function () {
                 console.log('get', data.name) // 监听
                 return data.name
              },
              set: function (newVal) {
                  console.log('set', newVal) // 监听
                  return data.name = newVal
               }
         })

object.defineProperty与reflect.defineProperty的区别

前者是返回一个新对象，是ES5的API，后者是返回一个布尔值，ES6的API，那后面的话object里的方法会慢慢迁移到reflect中。