给对象定义属性的特性
// Es5-》vue2.x 该API只支持IE7以上
let input = document.querySelector('#input');
let temData;
Object.defineProperty(obj,'data',{
set(newV){ //obj.data = 'xxx' 触发
console.log('set方法被调用了');
// 给input赋值
input.value = newV;
return temData = newV;
},
get(){
//访问到obj.data属性的时候 触发
console.log('get方法被调用了')
return temData
}
});
obj.data = 'xxx' //触发set
obj.data //触发get
input.oninput = function(e){
obj.data = e.target.value;
}
Proxy
let data = {
a:1,
b:1,
test(){
console.log('test fn')
}
}
let p = new Proxy(data,{
//代理
set(data,key,value,proxy){
console.log('set 函数触发了')
data[key] = value
return true;
},
set(data,key,value,proxy){
console.log('get 函数触发了')
data[key]
},
deleteProperty(data,key){
console.log('删除属性触发了')
delete data[key]
return true
}
})
p.a = '123'
console.log(p.a)
// 语法层面，没办法禁止代理对象呗删除
delete p.a
vue3 语法
handler.apply()
handler.construct()
handler.defineProperty()
handler.deleteProperty()
handler.get()
handler.getOwnPropertDescriptor()
handler.getPrototypeOf()
handler.has()
handler.isExtensible()
handler.ownKeys()
handler.preventExtensions()
handler.set()
handler.setPrototypeOf()
let obj = {}
let p = new Proxy(obj,{
deleteProperty(){
console.log('删除了属性')
//Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers的方法相同。Reflect不是一个函数对象，因此它是不可构造的。
return Reflect.deleteProperty(...arguments)
},
set(){
console.log('set属性')
return Reflect.set(...arguments)
},
get(){
console.log('get属性')
return Reflect.get(...arguments)
}
})
p.plus = '附加属性'
e7860ff0da6d7243b0abe776c1cc8c6.png
