对vue 双向数据绑定原理的理解

vue 双向数据绑定原理

实现原理

mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，

vue双向数据绑定，其核心是 Object.defineProperty()方法。

通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。就必须要实现以下几点：

如下图所示：

1. 通过数据监听器Observer，来监听数据对象的所有属性，改变时可以拿到最新数据并通知订阅者
2. 通过指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模版替换数据，并绑定相应的更新函数
3. 通过Watcher，作为连接Observer和Compile的桥梁，能订阅并接收每个属性变动的通知，执行指令绑定的相应回调函数，来更新视图

Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）

function defineReactive (obj, key, val) {
     
    var dep = new Dep();  //这是一个构造函数  其原型是为属性添加订阅者
    Object.defineProperty(obj, key, {
     
       get: function() {
     
            if(Dep.target) {
     
                dep.addSub(Dep.target);  //添加订阅者到Dep实例对象
            }
            return val;  // 返回监听到的value值
        },
        set: function (newVal) {
     
            if(newVal === val) return;
            val = newVal;  // 写入新的value值
            dep.notify();  // 作为发布者发出通知 然后dep会迭代调用各自的update方法来更新视图
        }
    });
}
function observe(obj, vm) {
     
     Object.keys(obj).forEach(function(key) {
     
           defineReactive(vm, key, obj[key]);
     });
}

详细代码实现可参考：Vue.js双向绑定的实现原理

参考资料：浅谈Vue双向数据绑定的原理