Vue3响应式原理与Vue2的对比

// 源数据
      let person = {
          name: '张三',
          age: 18
      }
      //#region
      // 模拟Vue2中实现响应式
      // let p = {}
      // Object.defineProperties(p, 'name', {
      //     configurable: true,
      //     // 有人读取name时调用
      //     get() {
      //         return person.name
      //     },
      //     // 有人修改name时调用
      //     set(value) {
      //         console.log('有人修改了name属性,我发现了,我要去更新界面!');
      //         person.name = value
      //     }
      // })
      // Object.defineProperties(p, 'age', {
      //     configurable: true,
      //     // age
      //     get() {
      //         return person.age
      //     },
      //     // 有人修改name时调用
      //     set(value) {
      //         console.log('有人修改了name属性,我发现了,我要去更新界面!');
      //         person.age = value
      //     }

      // })
  //#endregion
  //模拟Vue3中实现响应式
  // p为person的代理对象
  const p = new Proxy(person,{
      // 有人读取p的某个属性时调用
      get(target,propName){
          console.log('有人读取了p身上的'+propName+'属性');
          return target[propName]
      },
      // 有人修改p的某个属性,或给p追加某个属性时调用
      set(target,propName,value){
          console.log('有人修改了p身上的'+propName+'属性,我要去更新');
          target[propName] = value
      },
      // 有人删除p的某个属性时调用
      deleteProperty(target,propName){
          console.log('有人删除了p身上的'+propName+'属性,我要去更新');
          return delete target[propName]
      }
  })

 

posted @ 2022-01-27 16:57  ajaXJson  阅读(45)  评论(0编辑  收藏  举报