彩票游戏网站建设,wordpress主题之家,做自媒体发视频用哪些网站,js 做网站Object.DefineProperty配置对象的主要属性有#xff1a;
value:20 //添加的属性的value enumerable:true //是否可以被枚举获取到 默认#xff1a;false writeable:true //value是否可以被修改 默认#xff1a;false configurable:true //是否可以被删除 默认#xff1a;f…Object.DefineProperty配置对象的主要属性有
value:20 //添加的属性的value enumerable:true //是否可以被枚举获取到 默认false writeable:true //value是否可以被修改 默认false configurable:true //是否可以被删除 默认false get(){} //当这个属性被获取的时候调用 set(){} //当这个属性被修改的时候调用
Object.defineProperty(对象,要添加得键,{配置对象})
vue2响应式的缺陷
1.使用对象上定义新属性时Object.defineProperty监听不到。**因为Object.DefineProperty只能对对象的单个属性劫持如果要对对象进行劫持需要遍历。
const user {name: jack,} var name user.name;Object.defineProperty(user, name, {enumerable: true,writeable: true,configurable: true,
get() {return name},set(e) {name e}})user.age 20; // 并没有触发setconsole.log(user);delete user.age; //并没有触发setconsole.log(user);
2.Object.defineProperty无法监控到数组下标的变化。
let arr [1, 2, 3]let obj {}//把arr作为obj的属性监听Object.defineProperty(obj, arr, {get() {console.log(触发了get)return arr},set(newVal) {console.log(触发了set, newVal)arr newVal}})console.log(obj.arr) //触发了get [1,2,3] obj.arr [1, 2, 3, 4] //触发了set [1,2,3,4] obj.arr.push(5) //触发了getobj.arr.unshift() //触发了getobj.arr.pop() // //触发了getobj.arr.shift() //触发了get
3 object.defineProperty 只能劫持对象的属性。从而需要对每个对象每个属性进行遍历如果属性值是对象还需要深度遍历
const data {name: jack,age: 20,children: {name: john}}
function observer(target) {if (target null || typeof target ! object) {return target}for (let key in target) {//target[key]作为valuelet value target[key]observer(value)//调用自身监控内部对象如果不加遍历不到嵌套对象中的数据无法修改Object.defineProperty(target, key, {get() {console.log(Object.defineProperty触发了get);return value},set(newValue) {console.log(Object.defineProperty触发了set);if (newValue ! value) {value newValue//updateView()}}})}}observer(data)data.children.name marray//此时会调用get和set方法修改数据 Vue3中使用的响应式Proxy
在Vue3中则是使用Proxy来进行数据劫持Proxy不同于Object.defineProperty的是,它是对整个数据对象进行数据劫持,而Object.defineProperty是对数据对象的某个属性进行数据劫持如果是多层需要循环绑定。 Proxy 对象用于定义基本操作的自定义行为如属性查找、赋值、枚举、函数调用等。IE不兼容。基本格式为
const p new Proxy(target, handler) 参数: target: 要使用 Proxy 包装的目标对象可以是任何类型的对象包括原生数组函数甚至另一个代理。 handler: 一个通常以函数作为属性的对象各属性中的函数分别定义了在执行各种操作时代理 p 的行为。
handler 对象是一个容纳一批特定属性的占位符对象。它包含有 Proxy 的各个捕获器trap:
handler.getPrototypeOf() handler.setPrototypeOf() handler.isExtensible() handler.preventExtensions() handler.getOwnPropertyDescriptor() handler.defineProperty() handler.has()//in 操作符的捕捉器。 handler.get(target, property) handler.set(target, property, value) handler.deleteProperty()//delete 操作符的捕捉器。 handler.ownKeys() handler.apply() handler.construct()//new 操作符的捕捉器。
Proxy的应用——监控数组下标变化
let arr[1,2,3]let handler{get(target, key, receiver) {console.log(get的key为 key);return Reflect.get(target, key, receiver);},set(target, key, value, receiver){console.log(set的key为 key, value);return Reflect.set(target, key, value, receiver);}}let pnew Proxy(arr,handler);console.log(p[0]);//get的key为 0//1console.log(p.push(4));//get的key为 push//get的key为 length//set的key为 3 4//set的key为 length 4//4console.log(p);//Proxy {0: 1, 1: 2, 2: 3, 3: 4}console.log(p.shift());//get的key为 shift// get的key为 length// get的key为 0// get的key为 1// set的key为 0 2// get的key为 2// set的key为 1 3// get的key为 3// set的key为 2 4// set的key为 length 3// 1console.log(p);//Proxy {0: 2, 1: 3, 2: 4}
//reflect也是es6的语法再proxy使用中常用到reflectreflect有14中方法
//对应proxy是一样的但是这俩其实没关系只是搭配着使用proxy用来拦截reflect用来操作。
首先我们可以看到Proxy可以监控到数组下标的变化。 在使用push时先将push的值添加到数组中再更新数组长度所以才会有两次get和set。 在使用shift时首先要获取到要删除的元素下标并删除再更新每个下标的元素再更新数组长度。 Proxy的应用——监控对象属性的变化 const user {name: jack,}let handler{get(target, key, receiver) {console.log(get的key为 key);return Reflect.get(target, key, receiver);},set(target, key, value, receiver){console.log(set的key为 key, value);return Reflect.set(target, key, value, receiver);}}let pnew Proxy(user,handler);console.log(p.age10);// set的key为 age 10// 10console.log(p);//Proxy {name: jack, age: 10}
Proxy的应用——监控嵌套对象的数据变化
let obj{name: jack,phone:{main:10086,else:110}};let handler{get:function(obj,prop){console.log(proxy触发了get);const v Reflect.get(obj,prop);if(v ! null typeof v object){return new Proxy(v,handler);//代理内层}else{return v; // 返回obj[prop]}},set(obj,prop,value){console.log(proxy触发了set);return Reflect.set(obj,prop,value);//设置成功返回true}};let pnew Proxy(obj,handler);
console.log(p.name);//会触发get方法//proxy触发了get//jackconsole.log(p.phone.main);//会先触发get方法获取p.b然后触发返回的新代理对象的.c的set。//proxy触发了get//proxy触发了get//10086
由此我们可以看到如果我们想要获取到内部N层的数据,proxy就会调用N次get。且proxy在实现监控嵌套对象仅需要一个递归即可实现。
总结Proxy和Object.defineProperty的区别
1.Proxy性能优于Object.defineProperty。 Proxy代理的是整个对象Object.defineProperty只代理对象上的某个属性,如果是多层嵌套的数据需要循环递归绑定;
2.对象上定义新属性时Proxy可以监听到Object.defineProperty监听不到。
3.数组使用下标获取和修改Object.defineProperty监听不到Proxy可以监听到。
4.Proxy在ie浏览器存在兼容性问题
