vue的双向绑定原理

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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。