vue-数据双向绑定

网上有很多关于数据的双向绑定的介绍，但是感觉描述的太过于累赘。使阅读者感觉太难理解。这里我将一步一步循循渐进的方式。领导你们写一个数据的双向绑定的案例。 ——观察者模式

数据单向绑定M——V或者V——M

数据单向绑定之数据驱动视图即 M——V

数据单向绑定之视图驱动数据即 V——M

从上面的案例我们得知要想数据改变；我们需要获取变化，通知目标。
得到的思想：
1 需要一个观察者：收集数据或者dom的变化
2 需要一个订阅者：获取改变并更新数据或者dom

数据之双向绑定实现 MVVM

根据上面我们得到的启示来一步一步实现。
这里你需要了解一下：Object.defineProperty

数据双绑定一 观察者

案例只是单成对象，并没有做for循环遍历

数据双绑定二 订阅者

// 订阅者通过订阅器添加
function Watcher() {
    setTimeout(() => {
       // 这里是为了触发defineProperty 添加订阅者
        this.get()
    }, 5000)
}
Watcher.prototype = {
    // dom更新
    update: function () {
        console.log("dom要更新")
    },
    // 促使添加订阅者
    get: function () {
        Dep.target = this; // 这样处理很方便添加订阅者，需自己体会
        const val = obj.name;
        console.log(`我要获取${val}触发添加订阅者`)
    }
};

数据双绑定三 订阅器

把订阅者和观察者联合起来

// 订阅器
function Dep() {
    this.subs = []
}

Dep.prototype = {
   // 添加订阅者
    addSub: function (sub) {
        this.subs.push(sub)
    },
 //  通知订阅者
    notify: function () {
        this.subs.forEach(function (sub) {
            sub.update();
        });
    }
};

数据双绑定实例 测试

若要对多层对象监听则可以对对象实现for循环对每一个属性进行监听