网站开发侵权,服装网站建设前景分析,具有价值的广州做网站,四川凡术品牌策划有限公司数据劫持#xff0c;指的是在访问或者修改对象的某个属性时#xff0c;通过一段代码拦截这个行为#xff0c;进行额外的操作或者修改返回结果。
Object.defineProperty
const user {username: xiaoming,age: 10
}
let username user.username
Object.defineProperty(use…数据劫持指的是在访问或者修改对象的某个属性时通过一段代码拦截这个行为进行额外的操作或者修改返回结果。
Object.defineProperty
const user {username: xiaoming,age: 10
}
let username user.username
Object.defineProperty(user, username, {get() {return username},set(val) {console.log(修改了属性, val);}
})
console.log(user.username); //xiaoming
user.username zhangsan // 修改了属性 zhangsan第一个参数是劫持的对象第二个参数是劫持的对象属性第三个参数是执行对象包括get set方法此时只能针对一个属性进行劫持那么我们可以封装一下。
const user {username: xiaoming,age: 10
}function defineProperty(data,key,value){Object.defineProperty(data, key ,{get() {console.log(使用了${key}这个属性);return value},set(val) {console.log(修改了${key}属性, val);valueval}})
}
Object.keys(user).forEach(el{defineProperty(user,el,user[el])
})console.log(user.username);
console.log(user.age);
当使用Object.defineProperty监听的对象属性是数组时使用push、unshift、pop、shift、splice, ‘sort’, reverse监听是触发不了set的。只要不是重新赋值一个新的数组对象任何对数组内部的修改都不会触发set方法的执行。
不能监听属性新增和删除操作由于js的动态性可以为对象追加新的属性或者删除其中某个属性这点对经过Object.defineProperty方法建立的响应式对象来说只能追踪对象已有数据是否被修改无法追踪新增属性和删除属性。
Proxy
可以对目标对象的读取、函数调用等操作进行拦截然后进行操作处理。它不直接操作对象而是像代理模式通过对象的代理对象进行操作在进行这些操作时可以添加一些需要的额外操作。
参数
target为所要代理的目标对象target 为一个对象
handler 对代理对象的拦截时进行的操作
let obj{a:1,b:2
}
const p new Proxy(obj,{//target就是person本身//以下两种方式都可以vue3主要采用Reflect的方式get(target,propName){// return target[propName]console.log(读取数据);return Reflect.get(target,propName)},//读取和新增属性都会调用这个方法set(target,propName,value){// target[propName] valueconsole.log(修改或添加数据);Reflect.set(target,propName,value)},deleteProperty(target,propName){// return delete target[propName]console.log(删除数据);return Reflect.deleteProperty(target,propName)}
})
console.log(p.a);
p.b1
delete p.b
Proxy性能优于Object.defineProperty。 Proxy代理的是整个对象Object.defineProperty只代理对象上的某个属性,如果是多层嵌套的数据需要循环递归绑定;
对象上定义新属性时Proxy可以监听到Object.defineProperty监听不到需要借助$set方法;
数组的某些方法(push、unshift和splice)Object.defineProperty监听不到Proxy可以监听到;
vue2的数据劫持和vue3数据劫持的区别就在这里
通过Proxy代理拦截对象中任意属性的变化包括属性值的读写属性的添加属性的删除等比起vue2多出了增加和删除属性的监听。
通过Reflect反射对源对象的属性进行操作。类似于objec的操作方法。
