vue实现数据双向绑定原理

最新推荐文章于 2022-06-14 12:29:28 发布

杨仔小菜菜

最新推荐文章于 2022-06-14 12:29:28 发布

阅读量132

点赞数

文章标签： mvvm vue

本文链接：https://blog.csdn.net/ccyolo/article/details/115863465

版权

MVVM：双向数据绑定，指数据层（Model）-视图层（View）-数据视图（ViewModel）的响应式原理。
ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者

2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数

3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。watcher观察这里是发布订阅 observer监听观察这里是数据劫持
在这里插入图片描述
js实现简单的双向绑定

<body>
    <div id="app">
        <input type="text" id="txt">
        <p id="show"></p>
    </div>
</body>
<script>
	let obj = {};
    Object.defineProperty(obj,'txt',{
        get:function (){
            return obj
        },
        set:function (newValue){
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup',function (e) {
        obj.txt = e.target.value
    })

</script>