模仿vue2和vue3响应式原理

 // 源数据
    let person = {
      name: '张三',
      age: 18
    }

    // 模拟vue2中实现响应式
    //#region
    /*
    let p = {}
    Object.defineProperty(p, 'name', {
      get() {//有人读取name时调用
        return person.name
      },
      set(value) {//有人修改name时调用
        console.log('有人修改了name，我要去更新界面了');
        person.name = value
      }
    })
    Object.defineProperty(p, 'age', {
      get() {//有人读取name时调用
        return person.age
      },
      set(value) {//有人修改name时调用
        console.log('有人修改了age，我要去更新界面了');
        person.age = value
      }
    })
*/
    //#endregion

    //模拟vue3中实现响应式
    //#region
    const p = new Proxy(person, {
      // 有人读取p身上的某个属性时调用
      get(target, propName) {
        console.log(`有人读取了p身上的${propName}属性`);
        return Reflect.get(target, propName)
      },
      // 有人修改p身上的某个属性时，或给p增加新的属性时调用
      set(target, propName, value) {
        console.log(`有人修改了p身上的${propName}属性,我去更新界面了`);
        Reflect.set(target, propName, value)
      },
      // 有人删除p身上的某个属性时调用
      deleteProperty(target, propName) {
        console.log(`有人删除了p身上的${propName}属性,我去更新界面了`);
        return Reflect.deleteProperty(target, propName)
      }

    })
    //#endregion

    let obj = {
      a: 1,
      b: 2
    }
    // 通过Object.defineProperty去操作
    //#region
    // try {
    //   Object.defineProperty(obj, 'c', {
    //     get() {
    //       return 3
    //     }
    //   })
    //   Object.defineProperty(obj, 'c', {
    //     get() {
    //       return 4
    //     }
    //   })
    // } catch (error) {
    //   console.log(error);
    // }
    //#endregion


    // 通过Reflect.defineProperty去操作
    //#region