vue源码学习第一篇--理解双向数据绑定原理

最新推荐文章于 2024-03-19 20:18:30 发布

A-Select °

最新推荐文章于 2024-03-19 20:18:30 发布

阅读量193

点赞数 1

本文链接：https://blog.csdn.net/weixin_45959504/article/details/112911914

版权

一、原理

（1）vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式 的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

代码：
在这里插入图片描述

（2）核心：通过 Object.defineProperty() 方法；

（3）介绍 Object.defineProperty() 的使用方法：

Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj（要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法），简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；

二、先简单的实现一个js的双向数据绑定来熟悉一下这个方法：

<body>
    <div id="app">
        <input type="text" id="a">
        <span id="b"></span>
    </div>
</body>
<script>
    var obj = {};  //定义一个空对象

    var val = 'zhao';  //赋予初始值

    Object.defineProperty(obj, 'val', {//定义要修改对象的属性

        get: function () {

            return val;
        },

        set: function (newVal) { 

             val = newVal;//定义val等于修改后的内容

            document.getElementById('a').value = val;//让文本框的内容等于val
            
            document.getElementById('b').innerHTML = val;//让span的内容等于val

        }

    });
    document.addEventListener('keyup', function (e) {//当在文本框输入内容时让对象里你定义的val等于文本框的值

        obj.val = e.target.value;

    })

</script>

这个例子实现的效果是：随着文本框输入文字的变化，span中会同步显示相同的文字内容；这样就实现了 model => view 以及 view => model 的双向绑定。
通过添加事件监听keyup来触发set方法，而set再修改了访问器属性的同时，也修改了dom样式，改变了span标签内的文本。