当前位置: 首页 > Web前端 > vue.js

vue观察者模式和双向绑定的简单实现【编码】

时间:2023-04-01 12:14:26 vue.js

vardata={name:"fangtangxiansheng",job:"fe",power:0};console.log(data);lettarget=null;classwillObserver{watchList=[];//添加观察者addWatch(){target&&(this.watchList=[...newSet([...this.watchList,target])]);}watchUpdate(){这个。监视列表。forEach((watch)=>{watch.update();});}//通知notiy(){this.watchUpdate();}}classWatch{constructor(cb){this.cb=cb;目标=这个;}update(){this.cb();}}constcreatWatch=(expCondition,cb)=>{newWatch(cb);expCondition();};//构造“数据依赖埋点”consttrasnfromDataToAutoListion=(data)=>{Object.keys(data).forEach((key)=>{letcache=data[key];let_ob=newwillObserver();Object.defineProperty(data,key,{//触发监视实例更新set(v){cache=v;_ob.notiy();},//做一些隐藏的get(){_ob.addWatch();返回缓存;}});});};trasnfromDataToAutoListion(data);creatWatch(()=>{console.log("condition",data.name,data.job);},()=>{document.querySelector("#html").innerHTML=JSON。stringify(数据);});document.querySelector("#html").innerHTML=JSON.stringify(数据);setInterval(()=>{data.power=`${Math.random()*100}%`;},500);演示

最新推荐
猜你喜欢