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

Posted 坤小

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS双向数据绑定的原理介绍相关的知识,希望对你有一定的参考价值。

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>

以上是关于JS双向数据绑定的原理介绍的主要内容,如果未能解决你的问题,请参考以下文章

理解VUE2双向数据绑定原理和实现

js中的访问器属性中的getter和setter函数实现数据双向绑定

Vue.js双向绑定的实现原理

Vue.js双向绑定的实现原理

VUE底层原理之数据双向绑定

React中双向数据绑定基本原理