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

作者：

在

双向数据绑定简直是咱们在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>

评论

发表回复取消回复

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章