美文网首页
vue的双向绑定原理

vue的双向绑定原理

作者: 有希望的活着 | 来源:发表于2020-05-17 16:53 被阅读0次

1,Vue.js 采用的是 数据劫持+发布/订阅模式 的方式,通过 Object.defineProperty() 来劫持各个属性的 setter/getter, 在数据变动时发布消息给订阅者(Wacther), 触发相应的监听回调

2,简单实现

<htmllang="en">

<head><title>双向绑定最最最初级demo</title><metacharset="UTF-8"></head><body><divid="app"><inputtype="text"id="txt"><pid="show-txt"></p></div></body><script>varobj={}Object.defineProperty(obj,'txt',{get:function(){returnobj},set:function(newValue){document.getElementById('txt').value=newValuedocument.getElementById('show-txt').innerHTML=newValue}})document.addEventListener('keyup',function(e){obj.txt=e.target.value})</script>

相关文章

网友评论

      本文标题:vue的双向绑定原理

      本文链接:https://www.haomeiwen.com/subject/cbysohtx.html