最近总是有兄弟问我，Vue双向绑定的原理，以及简单的原生js写出来实现，我就来一个最简单的双向绑定，原生十行代码让你看懂原理

时间 2019-11-05

标签最近总是兄弟问我 vue 双向绑定原理以及简单原生写出实现一个最简单代码让你看懂栏目 JavaScript 繁體版

原文原文链接

废话很少说直接看效果图

代码很好理解，可是在看代码以前须要知道Vue双向绑定的原理其实就是基于
Object.defineProperty 实现的双向绑定官方传送门

这里咱们用官方的话来讲
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
语法：
Object.defineProperty(obj, prop, descriptor)
参数
obj：
要在其上定义属性的对象。
prop：
要定义或修改的属性的名称。
descriptor：
将被定义或修改的属性描述符。

这里面要说的真的就太多了，咱们就调双向绑定须要用到的说一下就能够了，须要了解更多的朋友能够进官网官网看更加详细的javascript

这里咱们就只是说一下 Object.defineProperty里面的核心的 get 和 set

get

let data ={} ;
let index = 1;
Object.defineProperty(data,"age",{ //不明白参数什么含义的请往上看咯
    get:function(){
        return index;//获取到了定义的index变量
    }
})
console.log(data); // {age:1}

怎么样，是否是很是简单，那么咱们趁热赶忙看一下set吧

set

var data ={} ;
var index= 1;
Object.defineProperty(data,"age",{
    get:function(){
        return index;
    },
    set:function(newZhi){
        index=newZhi;
    }
})
console.log(data);// {age:1}
哈哈 是否是感受和上面的get是同样的呢？用法都是同样的 那么楼主能来点不同的嘛？
回答：能够


----------


Object.defineProperty(data,"age",{
    get:function(){
        return index;
    },
    set:function(newZhi){
        index=newZhi+10;
    }
})
console.log(data); // {age:11}

既然Object.defineProperty里面的set和get看懂了就能够直接上手简单的双向绑定啦，这时候有的小伙伴可能就问了：什么？这么快？回答：就是这么快
直接贴代码每一行都是有注释的赶忙看看吧java

<body>
        <input type="text" id="inp"/>
        <div id="text">我是测试数据的</div>
</body>
<script type="text/javascript">
        const inp = document.getElementById("inp"),tex=document.getElementById("text"), data = {};//获取两个元素
        Object.defineProperty(data,"name",{
            get:function(){
                return inp.value;//获取到文本框value输入的值
            },
            set:function(newdata){//接收到文本框value的值
                tex.innerHTML = newdata;//div的值等于文本框的值
            }
        })
        inp.addEventListener("keyup",function(e){//键盘按下的时候来实时同步
            data.name = this.value;
        })
</script>

怎么样？是否是很简单呢十行代码就完事了(固然只是简单的双向绑定，拓展性很强）