用原生js实现Vue双向数据绑定

用原生js实现Vue双向数据绑定

大家都知道Vue有个很大的特色，就是不用操作dom就可以直接实现数据的双向绑定，极大的方便了我们使用Jquery、原生js时改变数据需要对Dom频繁的操作。

今天就和大家一起来使用原生js模拟一个Vue的数据双向绑定

html部分

<p id="showValue" style="height: 40px;line-height: 40px;color: white;background-color: black;"></p>
<input id="inputId" type="text" oninput='changeValue()'>

js部分

<script>
        let Aobj = {};    //命名为Aobj 方便大家在windows对象里面可以在最上面找到该属性
        let _this = this; //看下文
        Object.defineProperty(Aobj, 'name', {   //该函数体内的this指向Aobj  
            get: function () {
                return document.getElementById('inputId').value  //Aobj.name被调用的时候返回输入框里的值
            },
            set: function (val) {
                document.getElementById('inputId').value = val //设置Aobj.name的时候同时将值赋予给input
                _this.changeValue(event)
            },
            // value: "hello",     监听对象属性name的值 不能和get()、set()方法同时存在
            // writable: true,     设置监听的对象value值是否可以被重新赋值 不能和get()、set()方法同时存在
            // enumerable: true,   定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举
            // configurable: true  特性表示对象的属性是否可以被删除，以及除 value 和 writable 特性外的其他特性是否可以被修改。
        })
        function changeValue() {  //获取输入框的值实时显示在页面上
            let val = document.getElementById('inputId').value
            document.getElementById('showValue').innerText = val
            console.log(Aobj.name, '.....Aobj.name');
        }
</script>

这样就能实现一个简单的数据双向绑定了

至于Object.defineProperty以及可以监听更多对象属性的Object.defineProperties方法，大家可以去试验获得更多的解答。

今天的分享就到这里

大家可以自行复制代码去执行，观察结果，如果觉得笔者思想有误的欢迎在评论区指出，也欢迎大家随时加群交流！

**欢迎大家加入微信群交流**

今天是从业四年以来第4篇分享文章，也算是个进步吧，一天进步一点点，加油

好，今天的方法就分享到这里，如果各位有什么不明白的，可以在评论下留言，大家一起探讨。我是三井寿，一个永不放弃的男人！