vue2:vue3 劫持

给对象定义属性的特性

// 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