数据双向绑定原理及实现

现在主流JavaScript各有差异，但是都有的一个特性就是数据双向绑定。

以Vue.js为例，MVVM模式，细致地来分析，M(Model)数据层，V(View)视图层，VM(ViewModel)Vue实例。利用观察者模式，利用ViewModel这个中间桥梁，将完全分离的视图层和数据层连接起来。再通过JavaScript的数据劫持机制实现一方更新，另一方也随之更新的效果。

首先介绍一下什么是数据劫持。

数据劫持:

当我们访问或设置对象的属性的时候，都会触发相对应的函数，然后在这个函数里返回或设置属性的值。

而在Vue.js中其实就是通过Object.defineProperty来劫持对象属性的setter和getter操作，并“种下”一个监听器，当数据发生变化的时候发出通知。Vue.js会循环data中的数据,依次给已存在的属性用getter和setter加上set，get方法。

具体实现:

let obj={};
let temp={};
Obeject.defineProperty(obj,'name',{
    get(){
        return temp["name"]
    },
    set(val){
        temp["name"]=val;
        input.value=obj.name;
    },
});

input.value=obj.name;
input.addEventListener('input',function(){
    obj.name=this.value
});