Vue之Proxy

proxy是es6的语法，Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过 滤和改写。Proxy这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

写一个get的代理方法：

var person ={
  name:'zhangshan'
}

var proxy = new Proxy(person,{
  get:function(target,property){
    if(property in target)
    {
      console.log('has property')
      return target[property]
    }
    else{
      console.log('no property')
      return 250
    }
  }
})

console.log(proxy.name)
console.log(proxy.age)

输出结果如下：

 总结：

get方法拦截了获取属性的方法，先执行get方法的拦截，拦截之后的返回值就是最终显示的值。

 

在来一个set方法：

var person ={
  name:'zhangshan'
}

var proxy = new Proxy(person,{
  set:function(target,property,value){
    if(property in target)
    {
      console.log('has property')
      target[property] = value
    }
    else{
      console.log('no property')
      target[property] = 250
    }
  }
})

proxy.name = 'lisi'
proxy.age = 18
console.log(proxy.age)

输出如下：

 set方法可以实现对属性赋值的拦截，提前做好各种业务处理。

 

再来一个deleteProperty：

var person ={
  name:'zhangshan'
}

var proxy = new Proxy(person,{
  deleteProperty:function(target,property){
    if(property in target)
    {
      console.log('has property=' +property)
      //Reflect.deleteProperty(target, property);
      return  delete target[property]
    }
    else{
      console.log('no property')
      return false
    }
  }
})

console.log(delete proxy.age)
console.log(delete proxy.name)
console.log(proxy.name)

输出如下：