Vue实现数据双向绑定原理:

采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty() 将它们转为 getter/setter

这里来简单模拟一下双向绑定。

特点

1.比如input被监视,当输入发送改变时,会将数据推送到模型中。

2.当模型中的数据发生改变时,会映射到视图上。

思路

1.用defineProperty 劫持对象,添加好getter/setter方法,对劫持对象进行赋值时会执行setter,取值时执行getter。

2.页面监视很容易想到事件监听,输入框用addEventListener 添加 input事件,输入发生改变时,触发事件回调,将值赋值给劫持的对象,触发劫持对象的setter,在setter中把新数据写到模型中、同时更新到页面上

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    输入:<input type='text' id='inputText'/><br>
    动态值:<span id="show"></span>
</body>
<script>
    var inputText = document.getElementById("inputText");
    var show = document.getElementById("show");
    //输入框添加 input事件
    inputText.addEventListener("input",function(e){
        //给劫持对象设置为输入后的值
        defineObj.value = e.target.value;
    })
    //劫持对象
    var defineObj = {};
    //defineProperty进行劫持
    Object.defineProperty(defineObj, 'value', {
    configurable: true,
    enumerable: true,
    get:function() {
        return val;
    },
    set: function(newVal){
        val = newVal;
        //设置输入值跟随变化
        inputText.value = val;
        //设置显示值跟随变化
        show.innerHTML = val;
        
    }
    })

</script>
</html>

最终效果

在文本输入框输入值,会同步展示出来,内存中也同样发生了改变;

改变内存中的数据值,直接映射到页面上。

关注下方公众号,有更多资料、实例代码、面试技巧奉上!

Logo

前往低代码交流专区

更多推荐