2021-07-23 vue2与vue3的响应式原理

vue2的响应式原理

无法响应对象的新增与删除

      let p = {}
    Object.defineProperty(p, 'name', {
      configurable: true,
      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
      }
    })

vue3的响应式原理

    // vue3中的响应式
    // window.Proxy
    let person = {
      name: 'ZouHuaLu',
      age: 26
    }
    const p = new Proxy(person, {
      // 读取p的某个属性时调用
      get(target, propName) {
        console.log(`有人读取了p身上的${propName}属性`)
        return target[propName]
      },
      // 修改和新增p某个属性时会调用
      set(target, propName, value) {
        console.log(`修改了p身上的${propName}属性，更新界面`);
        target[propName] = value
      },
      // 有人删除p的某个属性时调用
      deleteProperty(target, propName) {
        console.log(`有人删除了p身上的${propName}`)
        return delete target[propName]
      }
    })