Part3-5-3 Vue.js 3.0 响应式系统原理

Posted 2021-09-17 沿着路走到底

Vue.js 3.0 响应式

Proxy 对象实现属性监听

多层属性嵌套，在访问属性过程中处理下一级属性

默认监听动态添加的属性

默认监听属性的删除操作

默认监听数组索引和 length 属性

可以作为单独的模块使用

核心方法

reactive / ref / toRefs / computed

effect

track

trigger

Proxy 使用的两个问题

Reflect.set 和 Reflect.deleteProperty 设置成功后返回 true,设置失败后返回 false

// 使用 type="module" 也会开启严格模式
<script>
    'use strict'
    // 问题1： set 和 deleteProperty 中需要返回布尔类型的值
    // 在严格模式下，如果返回 false 的话会出现 Type Error 的异常
    const target = {
      foo: 'xxx',
      bar: 'yyy'
    }
    // Reflect.getPrototypeOf()
    // Object.getPrototypeOf()
    const proxy = new Proxy(target, {
      get (target, key, receiver) {
        // return target[key]
        return Reflect.get(target, key, receiver)
      },
      set (target, key, value, receiver) {
        // target[key] = value
        return Reflect.set(target, key, value, receiver)
      },
      deleteProperty (target, key) {
        // delete target[key]
        return Reflect.deleteProperty(target, key)
      }
    })

    proxy.foo = 'zzz'
    // delete proxy.foo


    // 问题2：Proxy 和 Reflect 中使用的 receiver

    // Proxy 中 receiver：Proxy 或者继承 Proxy 的对象
    // Reflect 中 receiver：如果 target 对象中设置了 getter，getter 中的 this 指向 receiver

    const obj = {
      get foo() {
        console.log(this)
        return this.bar
      }
    }

    const proxy = new Proxy(obj, {
      get (target, key, receiver) {
        if (key === 'bar') { 
          return 'value - bar' 
        }
        return Reflect.get(target, key, receiver)
      }
    })
    console.log(proxy.foo)
  </script>

reactive

接收一个参数，判断这参数是否是对象

创建拦截器对象 handler ，设置 get / set / deleteProperty

返回 Proxy 对象

1