vue双向绑定的原理

先不说一大堆乱七八糟的话，直接上代码，然后再解释

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<input type="text" id="username">
<input type="text" id="uname">
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj,"username",{
        get:function(){
            console.log("get init")
        },
        set:function(val){
            console.log("set init")
            document.getElementById('uname').value = val
        }
    })
    Object.defineProperty(obj,"uname",{
        set:function(val){
            document.getElementById('username').value = val
        }
    })
    document.getElementById('username').addEventListener("keyup",function(event){
        obj.username = event.target.value
    },false)
    document.getElementById('uname').addEventListener("keyup",function(event){
        obj.uname = event.target.value
    },false)
</script>
</body>
</html>

实现效果

Object.defineProperty有两个底层的方法分别是set和get，双向绑定就主要用到了set。
如上面代码，我们用Object.defineProperty来定义obj的属性，分别定义了username，uname两个属性，只要给这两个属性赋值，set方法就会被隐秘的调用。
正好set方法里有个参数val，就是所赋的值。我们可以在set方法里，把这个val赋值给分别需要绑定的input的value值。
再通过绑定keyup事件，将输入的内容赋值给obj的两个属性，这样就实现了vue的双向绑定。

posted @ 2019-12-01 20:35  好多坨屎  阅读(275)  评论(0)    收藏  举报