ES2015 Proxy 对比 defineProperty

如果我们想监视某个对象的读写，我们可以使用ES5提供的defineProperty方法为对象添加属性，可以捕获到对象属性的读写过程。

defineProperty应用场景：在vue3.0 以前的版本，就是使用defineProperty实现了数据响应从而实现双向数据绑定。

因为Proxy比defineProperty强大，vue3.0 中使用的是Proxy

在ES2015中，全新设计了一个叫做Proxy 的类型，专门用来为对象设置访问代理器。

什么是代理呢？

通俗点解释：把代理想象成门卫，无论你是想出去还是想进去放东西都会被监视。

相比于defineProperty，Proxy 功能更加强大，使用起来也更加方便。

一、Object.defineProperty的基本使用

ES2015之前 Object.defineProperty

const person = {
   
  name:'luyu',
  age:18
}

// ES2015之前 Object.defineProperty
let person2 = Object.assgin({
   },person)
Object.defineProperty(person,'name',{
   
  set(newVal){
   
    // 不要直接去修改obj1.x，这样会导致死循环（无限递归）
    person2.name = newVal;
  },
  get(){
   
    return person2.name;
  }
})
person.name = 20; // set...

二、Proxy的基本使用

ES2015 之后 Proxy

const person = {
   
  name: