原生js实现vue的数据双向绑定

向右看齐 2022-10-04 13:56 212阅读 0赞

### 写在前面 ###

> 很多面试官在面试的时候为了显示自己很牛，喜欢问面试者，你会不会使用原生js实现vue的双向绑定啊，每次我遇到这种面试官我都想揍他一顿，不是说这个问题问得不好，我就想问问，我会或者不会影响我使用vue吗？如果真的是使用原生的话，需要这种功能吗？如果使用vue的话，需要知道吗？但是很多面试官还是会问，所以这里我还是给大家写一下，其实没有想象的那么的难！

### 简单的分析一波 ###

> 所谓的双向绑定就是这边输入数据的时候，另一个dom节点可以时刻监听到这个数据的变化，并且做出相应的操作，最简单的操作就是输入什么就显示什么，这个是怎么实现的呢？我们使用构造器Object的一个方法属性就行，它具有改变一个对象原有值的一个特性，所以这里是可以直接进行改变的，那么我们改变以后，监听的是用户的输入操作，也就是onkeyup的操作，这个时候将onkeyup操作下的值给到上面需要显示的值即可！源码如下：

<!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="B"></input><br />
        <span id="S">{ { textModel}}</span>
        <script>
            let mod = { }
            Object.defineProperty(mod, 'textModel', { 
                set: function (arg) { 
                    document.getElementById('S').innerHTML = arg
                    document.getElementById('B').value = arg
                }
            })
            document.getElementById('B').onkeyup = function (params) { 
                console.log(mod)
                mod.textModel = params.target.value
            }
            mod.textModel = ""
        </script>
    </body>
    
    </html>

### 效果 ###

![image.png][]

[image.png]: /images/20221004/452a519eff1a4231a7be3bfb90d0becb.png