首页天道酬勤双向绑定的实现原理,vue的数据双向绑定

双向绑定的实现原理,vue的数据双向绑定

张世龙 05-04 02:13 59次浏览

目录

一、用一句话说明vue的双向绑定原理

二、详细阐述vue的双向绑定原理

1、vue 2.x双向绑定

2、vue 3.x双向绑定

3、完整案例

一、一句话vue双向绑定原理(vue的响应式原理)vue 在实例化的时候,使用 Object.definePropery() 方法或 Proxy 构造函数,对 data 进行 getter 和 setter 的处理。在组件渲染时,若用到 data 里的某个数据,这个数据就会被依赖收集进 watcher 里。当数据更新,如果这个数据在 watcher 里,就会收到通知并更新,否则不会更新——vue 采用“数据劫持”+“观察者模式(发布者-订阅者模式)”相结合的方式实现了双向绑定——vue 的响应式原理。

【展开】

数据劫持“查看器模式(发布者-订阅者模式)”: Object.defineProperty )方法(Vue 2.x )或ES6的Proxy构造函数(vue3. define property )

二、详细阐述: vue双向绑定原理(vue响应式原理)的第一步,“http://www.Sina.com /”: vue2. x为Object.defineProperty ) )方法实现数据高vue 3.x通过ES6的Proxy构造函数实现了数据劫持。 步骤2,“数据劫持”:在编译时将订阅者添加到此属性的数组dep中。 添加方法是,v-model添加订阅者,{ }和v-bind都在理论上尽可能添加到其属性的指令中。 步骤3,“添加订阅者”:将监听事件添加到input中时,如果更改了值,则会为该属性赋值,并在该属性的set (触发方法并设置)方法中订阅者数组重复调用每个订阅者的update ) )方法来更新视图。 1、vue 2.x双向绑定---发布者-订阅者模式:

//订阅者(观察者) let uid=0; class dep { constructor (} { this.id=uid; this.subs=[]; }addsub(sub ) this.subs.push ) sub; }removesub(sub ) { const arr=this.subs,item=sub; if(arr.length ) constindex=arr.indexof ) item; if (索引-1) return arr.splice (索引,1 ); } } } depend () if ) window.target ) window.target.adddep ) this ); } } notify () { const subs=this.subs.slice ); for(letI=0,len=subs.lengths; i len; I ) { subs[i].update (; }//发布者(被观察者) (不考虑深度拦截) classwatcher ) constructor (虚拟机,expOrFn,cb ) ) { this.vm=vm; this.deps=[]; this.depIds=new Set (; this.getter=expOrFn; this.cb=cb; this.value=this.get (; (get ) ) { window.target=this; varvalue=this.getter.call (this.VM,this.VM ); window.target=undefined; 返回值; } addDep () { const id=dep.id; if (! this.depids.has(id ) ) this.depids.add ); this.deps.push(dep; dep.addsub(this; } }更新() { console.log )、value: )、this.value ); }/*使用“发布者-订阅模型”示例*///创建发布者实例varwatcher=newwatcher({x:},) val=val ); watcher.get (; //创建订阅者实例var dep=new Dep (; //订阅者要发布的dep.depend (); dep.notify (; -数据劫持:

//数据劫持functiondefinereactive(obj、key、val ) ) { let dep=new Dep; object.defineproperty(obj,key,{ enumerable: true,configurable: true,get: function reactiveGetter ) { dep } 、set : function reactivesetter (newval ) if ) val==newval ) { return; } val=newVal; dep.notify (; }; ); } 2、vue 3.x双向绑定vue 3.x双向绑定和vue 2.x双向绑定均采用发布者-订阅模式,不同的是数据劫持的实现,vue 3.x是ES6的代理

proxy (数据,{ get } target,key ) ) returntarget ) key; },set(target,key,value ) ) letval=reflect.set ) target,key,value ); _ that.$ dep [ key ].foreach (item=item.update (); 返回电压; }}3、完整的工况body divid=' demo '/div input type=' text ' id=' InP '/body script type=' text/JavaScript ' var obj={ var } demo ) ) var InP=document.query selector (# InP ) ) object.defineproperty ) ),set 333666 demo.innerHTML=newVal; }}InP.addeventlistener('input ',function(e ) e ) )为obj的name属性赋值并触发该属性的set方法obj.name=e.target.varget . ); obj.name='fei '; 在//obj中设置name属性时,触发了名为set的方法/script

参考文件:

Proxy劫持Vue数据: https://环岛局域网. zhi Hu.com/p/50547367

用一句话说明Vuex的工作原理: https://砖局域网.智惠.com/p/106838529

js双向数据绑定原理,javascript实现双向绑定