vue双向绑定原理

最新推荐文章于 2024-04-03 01:42:38 发布

CoderAxiba

最新推荐文章于 2024-04-03 01:42:38 发布

阅读量105

点赞数

本文链接：https://blog.csdn.net/CoderAxiba/article/details/104328410

版权

通过Object.defineProperty实现数据劫持

vue中双向绑定主要是通过数据劫持和发布订阅者模式实现的。

1）数据劫持、vue是通过Object.defineProperty()来实现数据劫持，其中会有getter()和setter方法；当读取属性值时，就会触发getter()方法，在view中如果数据发生了变化，就会通过Object.defineProperty( )对属性设置一个setter函数，当数据改变了就会来触发这个函数；
以下是自己写的一个最简单的双向绑定实现方法：文本框输入数据，使得对象中的某个属性改变（可以理解为vue中data里的属性值），然后将新的值用p标签渲染到页面上。此时还没有使用发布订阅者模式实现全局更新

<body>
<input type="text">
<p></p>
<script>
    var obj = {
        name:"刘某",
        age:22
    }
    Object.defineProperty(obj,"age",{
        get(){
            console.log("age属性被读取了");
        },
        set(newVal){
            console.log("age属性被修改了，新值是："+newVal);
            document.querySelector("p").innerText = newVal;
        }
    })

    document.querySelector("input").addEventListener("keyup",function (e) {
        obj.age = e.target.value;
    })
</script>
</body>