用JS简单实现Vue的双向绑定

男娘i 2021-07-25 01:43 468阅读 0赞

# 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>

### 最终效果 ###

![20210408213816789.gif][]

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

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

### **关注下方公众号，有更多资料、实例代码、面试技巧奉上！** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

[20210408213816789.gif]: /images/20210724/2629e92ae11d4f05bca9ed79812c93d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/cc88c35d1fc0469eb7932859dd991e76.png