关于前端:Vuejs手写实现双向数据绑定

38次阅读

共计 386 个字符，预计需要花费 1 分钟才能阅读完成。

双向数据绑定简直是咱们在 vue 中听到的最多的货色。v-model 是咱们最常见的双向数据绑定指令。那么它到底是怎么实现的，一起手写一下。

<body>
    <input type='text'>
</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;
        }
    })
    
    // 当咱们 obj 中的 a 属性发生变化后，input 的值跟着扭转
    //input 的值发生变化后，obj 的 a 属性也跟着扭转
</script>

正文完