vue3响应式原理

vue3的响应式原理

核心:

• 通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等...
• 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作
• 文档:
  • developer.mozilla.org/zh-CN/docs/…
  • developer.mozilla.org/zh-CN/docs/…

 // 目标对象
    const user = {
      name: '鸣人',
      age: 20,
      wife: {
        name: '雏田',
        age: 19,
        sons: ['博人', '向日葵']
      }
    }

    // 把目标对象变成代理对象
    const proxyUser = new Proxy(user, {
      get(target, prop) {
        console.log('get方法 调用了')
        return Reflect.get(target, prop)
      },
      set(target, prop, value) {
        console.log('set方法 调用了')
        return Reflect.get(target, prop, value)
      },
      deleteProperty(target, prop) {
        console.log('del方法 调用了')
        return Reflect.get(target, prop)
      }
    })

    console.dir(user)
    console.log(user.name)
    user.name = '佐助'
    console.log(user)
    user.wife.name = '小樱'
    console.log(user)
    user.wife.sons[1] = 'xxx'
    console.log(user)
    user.a = 'bbb'
    console.log(user)
    delete user.a
    console.log(user)