3

双向数据绑定几乎是我们在vue中听到的最多的东西。v-model是我们最常见的双向数据绑定指令。那么它究竟是怎么实现的,一起手写一下。

<body>
    <input type='text'>
    <span class='ppp'></span>
</body>

<script>
    let obj = {};
    let temp;
    
    let ipt = document.querySelector('input');
    ipt.oninput = function(){
        obj.a = ipt.value;
    }
    
    //获取焦点 并且用户修改了值
    Object.defineProperty(obj,'a',{
        get:function(){
            return temp;
        },
        set:function(val){
            temp = val;
            ipt.value = val;
            document.querySelector('ppp').innerHTML = val;
        }
    })
    
    //当我们obj中的a属性发生变化后,input的值跟着改变
    //input的值发生变化后,obj的a属性也跟着改变
</script>

王超
42 声望1 粉丝

世间美好,与你环环相扣。