(编辑:jimmy 日期: 2024/12/23 浏览:2)
双向的绑定的原理
通过Object.defineproperty()重新定义对象属性的set方法、get方法来实现的,从这个属性中取值时会触发get方法,改变这个属性时会触发set方法,所以我们只要将一些需要更新view的方法放在这里面就可以实现data更新view了,而view更新data其实可以通过事件监听实现
当视图上的数据发生改变时, data 中的数据也发生改变当 data 中的数据发生改变时,视图中的数据也发生改变 Object.defineProperty()
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
语法:Object.defineProperty(obj, prop, descriptor)
参数:
返回值
被传递给函数的对象。
对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。数据描述符是一个具有值的属性,该值可以是可写的,也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一;不能同时是两者。
作用
* 可以给对象的一个属性设置两个方法:
* get:从这个属性中取值时会触发get方法
* set:给这个属性赋值时会触发set方法
let obj = {} // 给obj的name属性设置两个方法get&set Object.defineProperty(obj,'name',{ set:function (value){//value就是给name赋值的结果 console.log('触发了set'); this._name=value//保存这个值 这里不能直接用name,因为会触发set }, get:function(){ console.log('触发了get'); // 将保存的值返回回来 return this._name } })
在给name属性赋值的时候触发set方法,在set方法中将值存起来
取值时触发get方法,在get方法中将值返回回来
vue2.x双向绑定原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 这里相当于V --> <div id="v"></div> <input type="text" id="ipt"> </body> <script> // MVVM: // 当V改变,M自动改变 // 当M改变,V自动改变 // 这里相当于M let data = {} // 给data中的name属性设置两个方法get ,set Object.defineProperty(data,'name',{ set:function(value){ // 当M改变时,V自动改变 document.querySelector('#v').innerHTML = value }, get:function(){ return this._name } }) // 给input添加一个内容改变的之后会触发的事件 document.querySelector('#ipt').oninput = function(e){ data.name = e.target.value } </script> </html>
一旦输入框中的内容发生改变,就会触发oninput事件马上改变data中的内容,一旦data中的name发生改变就会触发set方法将最新的值赋值给v,这样就实现了数据的双向绑定
vue3.x双向绑定原理
Vue3.x是通过proxy(代理)实现的数据的双向绑定
proxy
跟Object.defineProperty一样也可以给对象的属性添加两个方法get&set
区别:
用法:
let p = new Proxy(obj,{get:function(){},set:function(){}})
<script> let obj = {} let p = new Proxy(obj,{ get:function(obj,prop){ //obj :被代理的对象 prop:要操作的属性 console.log('触发了get'); return obj[prop] }, set:function(obj,prop,value){ // obj:被代理的对象 // prop要赋值的属性 // value要赋值的结果 console.log('触发了set'); // 将赋值的结果保存起来 obj[prop] = value } }) </script>
总结