vue2的响应式处理defineProperty和vue3中的响应式处理proxy，其实这块是系统默认操作的，但是要了解其原理及使用方法及区别

**

vue2中响应式原理defineProperty（其实这块是系统默认操作的，但是要了解其原理及使用方法）

注意：修改和获取是可以捕获到的，但是添加和删除是vue2捕获不到的；
**

 let person = {
      name:'张三',
      age:12
    }
    let p = {}
    Object.defineProperty(p,'name',{
      configurable:true,// 可配置的；新增和删除是不好用，需要设置该属性为true，才可以实现响应式
      get(){
        // 有人读取name时调用
        return person.name
      },
      set(value){
        // 有人修改name时调用
        person.name = value
      }
    })

    // delete.p.name // 删除

**

vue3中响应式原理（其实这块是系统默认操作的，但是要了解其原理及使用方法

**

注意：work是某一个对象的意思；
通过proxy监听数据变化；
通过reflect反射来修改元数据，那么什么是reflect

    let proxy = new Proxy(work,{
      // 获取属性时被调用
      get(target,propName){
        return Reflect.target[propName]
      },
      // 修改和追加属性时被调用
      set(target,propName,value){
        Reflect.target[propName] = value
      },
      // 删除属性时被调用
      deleteProperty(target,propName){
       return Reflect.delete target[propName]
      },
    })

proxy中文文档

Reflect中文文档