vue绑定原理,vue的数据双向绑定
vue2和vue3的双向绑定书写方式不同。 vue使用Object.defineProperty劫持对象属性,vue3使用Proxy代理实现双向绑定。
vue2:
div class=' data '/divlabelvue 2:/label input type=' text ' class=' data input '/vardata={ } object.definepropect (返回专用属性_value ) (set ) value ) )在document.queryselector ).data ' ).innertext=//data.value发生更改时将结果显示为html Object.defineProperty ) )此方法相当于通过直接为对象定义新属性或修改和返回对象的现有属性来劫持对象的属性。 传统服饰可以通过定义setter和getter寄存器的属性并使用get和set进行操作来实现vue2的双向绑定
vue3的双向绑定原理与vue2基本相同,只是使用代理编写的。 他们之间的区别在于,Object.defineProperty为每个属性定义set和get,而Proxy可以为一个对象的所有属性定义get和set
vue3:
div class=' data2'/divlabelvue :/label input type=' text ' class=' data2input '/vardata2={ }; DATA2=newproxy(data2,{get(target,key ) )返回目标) key;set(target,key,value ) document.queryselector('.data2' ).innerText=value; (、); document.query selector (.data2input ).oninput=(e )={ data2.name=e.target.value; (;
现在,您已经实现了vue2和vue3的双向绑定