Vue双向绑定原理理解

现在的三大框架都是由双向绑定的，所谓双向绑定就是：数据变更，界面视图变更，视图变更，数据变更的实时更新

Vue的话是用的 Object.defineProperty（）方法来实现属性的监听的。直接看例子吧：

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="a">test111</div>
<input placeholder="bind" id="ipt">
<div id="result">test222</div>
</body>
<script src="index.js"></script>
<script>
    
    let d={
        val:2,
        name:'test'
    };
    //t 是个观察者 观察d
    let t = new TwoWayBind(d);

    setTimeout(function () {
        t.name = 'success';
        console.log('this',d);
    },2000);
    document.getElementById('ipt').addEventListener('keyup', function (e) {
        t.val = e.target.value;

        document.getElementById('result').innerText = d.val;
    });

    // })


</script>
</html>

index.js

class TwoWayBind {
    constructor(data) {
        this.data = data;
        this.tem = Object.assign({}, this.data);
        this.addWatch();
    }

    addWatch() {
        let self = this;
        console.log('this.data', this.data);
        // console.log('11',self.data['obj']);
        Object.keys(this.data).forEach((key) => {
            Object.defineProperty(self, key, {
                set(newVal) {
                    console.log('newVal', newVal);
                    self.data[key] = newVal;
                },
                get() {
                    console.log('data', self.data);
                    return self.data[key];
                }
            });
        });
        // self.data['obj'] == 3;
        console.log('this', self.data);
    }
}


Object.defineProperty()第三个参数是一个函数回调，里面会由set和get方法 ，每次修改和获取对象属性的时候都会执行这里，

这里在中间会有一个观察者如果数据发生改变，观察者就会通知他进行改变

可以自己拷贝代码试试～～

Vue双向绑定原理理解

猜你喜欢