珠海移动网站定制,WordPress小程序导航栏,wordpress 代码,深圳专业做公司网站前言#xff1a;
vue2 的双向数据绑定是利⽤ES5的⼀个 API #xff0c;Object.defineProperty( )对数据进行劫持结合发布订阅模式的方式来实现的。 vue3 中使⽤了 ES6的Proxy代理对象#xff0c;通过 reactive() 函数给每⼀个对象都包⼀层Proxy#xff0c;通过 Proxy监听属…前言
vue2 的双向数据绑定是利⽤ES5的⼀个 API Object.defineProperty( )对数据进行劫持结合发布订阅模式的方式来实现的。 vue3 中使⽤了 ES6的Proxy代理对象通过 reactive() 函数给每⼀个对象都包⼀层Proxy通过 Proxy监听属性的变化从而实现对数据的代理操作。
一Object.defineProperty( ) let obj { }let val Object.defineProperty(obj,name,{enumerable: true, // 表示该属性是否可以在 for...in 循环中被枚举。默认为 false。configurable: true, // 能否被删除 默认falseget(){console.log(访问name属性)return val },set(newVal){console.log(newVal,newVal);val newVal}})obj.name coderkey // 触发set方法
console.log(obj.name); // 触发get方法
obj.age 18 // 不会触发set方案
console.log(obj.age); // 不会触发get方法
delete obj.name; // 不会触发set方案注意只能访问和修改新增和删除不会触发set方法 二Proxy代理对象
let obj {name: coderkey,age: 18,habby: {try1: 篮球鸡坤,try2: 足球}
}
let handler {// 访问get(target, prop) {console.log(触发get方法,target[prop]);return Reflect.get(target, prop)},// 修改与新增set(target, prop, value) {console.log(触发set方法,value);//通过反射对象把数据反射出去return Reflect.set(target, prop, value)},// 删除deleteProperty(target, prop) {console.log(触发delete方法);return Reflect.set(target, prop)}
}
let proxyObj new Proxy(obj,handler)// 通过代理对象对目标对象进行增删改查操作
proxyObj.name pink // 触发set方法
proxyObj.sex 男 // 触发set方法
console.log(proxyObj.sex); // 触发get方法
delete proxyObj.sex // 触发deleteProperty方法
console.log(proxyObj.sex); // 触发get方法 undefined
console.log(proxyObj); // 代理对象 {name: pink, age: 18, sex: undefined} 注意: 可以代理同一层对象可以增删改查操作
