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

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

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

<input id="test1">
</input>
<script>
let data = 2;
const oSpan = document.getElementById("test1");
oSpan.value = data;
// 这里改变数据通知视图变化 
setInterval(() => {
    data += 1;
    oSpan.value = data;
}, 1000)
</script>

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

<input id="dom2"/>
</body>
<script>
let data;
const oDom = document.getElementById("dom2")
// 通过监听 dom变化通知数据改变
oDom.addEventListener("input", (ev) => {
    data = ev.target.value
    console.log(data)
})
</script>

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

数据之双向绑定实现 MVVM

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

数据双绑定一 观察者

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

<script>
const obj = {
    name: 'yx',
    age: 18
};

Object.defineProperty(obj, "name", {
    enumerable: true,
    configurable: true,
    get: function (val) {
        console.log("这里要添加订阅者")
    },
    set: function (val) {
        console.log("这里要通知订阅者")
    }
});
// 读取数据的时候 我们要添加订阅
setTimeout(() => {
    console.log(obj.name)
}, 1000)
// 改变数据的时候通知
setTimeout(() => {
    obj.name = "yxx"
}, 3000)
</script>

数据双绑定二 订阅者

// 订阅者通过订阅器添加
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();
        });
    }
};

数据双绑定实例 测试

<script>
const obj = {
   name: 'yx',
   age: 18
};

// 订阅器  添加/通知 订阅者
function Dep() {
   this.subs = []
}

Dep.prototype = {
   addSub: function (sub) {
       this.subs.push(sub)
   },
   notify: function () {
       this.subs.forEach(function (sub) {
           sub.update();
       });
   }
};

dep = new Dep();

function Observer(data, key) {
   Object.defineProperty(obj, "name", {
       enumerable: true,
       configurable: true,
       get: function (val) {
           console.log("这里要添加订阅者");
           // dep.addSub(objW)
           dep.addSub(Dep.target)
       },
       set: function (val) {
           console.log("这里要通知订阅者")
           dep.notify()
       }
   });
}

observer = new Observer(obj, "name");

function Watcher() {
   setTimeout(() => {
       this.get()
   }, 5000)
}

Watcher.prototype = {
   // dom更新
   update: function () {
       console.log("dom要更新")
   },
   // 促使添加订阅者
   get: function () {
       Dep.target = this;
       const val = obj.name;
       console.log("我要获取数据触发添加订阅者")
   }
};
new Watcher()


setTimeout(() => {
   obj.name = "yxxx"
}, 10000)
</script>

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