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中文文档