JS双向数据绑定的原理介绍

最新推荐文章于 2024-05-15 17:02:15 发布

坤小

最新推荐文章于 2024-05-15 17:02:15 发布

阅读量1.5k

点赞数 7

分类专栏： JavaScript学习文章标签： JavaScript 双向数据绑定原理

本文链接：https://blog.csdn.net/u013263917/article/details/102969209

版权

JavaScript学习专栏收录该内容

17 篇文章 2 订阅

订阅专栏

`1.双向数据绑定的原理：属性拦截`

`2.属性拦截实现方式：使用Object.defineProperty()将对象的属性变成访问器属性。`

3.如果对访问器属性不是很了解的小伙伴可以看一下这一篇文章哈：JS数据属性与访问器属性

4.本小节主要模拟vue的双向数据绑定原理，由于vue渲染数据使用了虚拟DOM技术，比较复杂，所以这里笔者就稍微了写简单一些哈。主要的目的是为了双向绑定的原理，而不是虚拟DOM渲染的原理。

效果演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="请输入文本" v-model="{{ msg }}"><br>
        您输入的文本是：<p>{{ msg }}</p>  <br>
        <button onclick="app.msg = '我是黑马保健坤'">点我修改文本</button>
    </div>

    <script>
        function hmVue(obj) {
            //querySelector默认只会获取满足选择器条件的第一个元素
            // vue的挂载点el只能选中一个元素的原理
            this.el = document.querySelector(obj.el);
            // vue会将data对象中的成员平铺到vue实例中
            this.msg = obj.data.msg;
            this._msg = this.msg;

            /* 
            双向数据绑定的原理 ： 属性拦截
            */
            //1.监听data  -> 开始监听data中的数据变化
            Object.defineProperty(this, "msg", {
                get: function () {
                    console.log('有人想要读取我的值');
                    return this._msg;
                },
                set: function (newValue) {
                    console.log('外部赋值时的传参' + newValue);
                    this._msg = newValue;
                    // data值变化 ： 修改input的value值
                    input.value = newValue;
                    // data值变化 ： 渲染到页面
                    var p = document.querySelector('p');
                    p.innerText = newValue;
                }
            });

            //2.监听input -> 开始监听input表单的value值变化
            //利用属性选择器，选中使用了 v-model指令的表单元素
            var input = document.querySelector(`${obj.el} [v-model]`);
            //监听输入框value值变化（这里我直接使用了oninput事件），其实使用属性拦截不仅可以让表单元素实现双向数据绑定，还可以让页面任何元素都能实现双向数据绑定
            input.oninput = function(){
                // input值变化 ， 修改data中的数据
                this.msg = input.value;
            }.bind(this);
            
        };

        var app = new hmVue({
            el: '#app',
            data: {
                msg: ''
            }
        });

    </script>
</body>

</html>