vue的双向绑定原理极简版

最新推荐文章于 2024-07-31 23:47:49 发布

卡乔丹

最新推荐文章于 2024-07-31 23:47:49 发布

阅读量164

点赞数

分类专栏： js vue

本文链接：https://blog.csdn.net/m0_46176426/article/details/104951840

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

原理

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的getter，setter，在数据变动时发布消息给订阅者，触发相应的监听回调。我们先来看Object.defineProperty()这个方法：

<script>
        var obj = {}
        let middel = 100
        Object.defineProperty(obj,"msg",{
            get(){
                return middel
            },
            set(val){
                middel = val
            }
        })
        obj.msg = 1111//再给 obj 设置 msg 属性的时候，会调用自身的 set 方法
        console.log(obj.msg)//在打印 obj.msg 时会调用自身的 get 方法     //打印结果为1111
</script>

应用

同步显示输入框里的内容

<body>
    <div id="dis"></div>
    <input type="text" id="inp">
    <script src="./vue.js"></script>
    <script>
        var obj  = {};
        var dis = document.querySelector('#dis')
        var inp = document.querySelector('#inp')
        Object.defineProperty(obj, 'name', {
            get: function() {
                return val;
            },
            set: function (newVal) {//当该属性被赋值的时候触发
                inp.value = newVal;
                dis.innerHTML = newVal;
            }
        })
        inp.addEventListener('input', function(e) {
            obj.name = e.target.value;// 给obj的name属性赋值，进而触发该属性的set方法
        });
        obj.name = 'fei';//在给obj设置name属性的时候，触发了set这个方法
    </script>
</body>