《Vue.js 设计与实现》读书笔记 - 第6章、原始值的响应式方案 & 响应式总结

第6章、原始值的响应式方案

6.1 引入 ref 的概念

既然原始值无法使用 Proxy 我们就只能把原始值包裹起来。

function ref(val) {
  const wrapper = {
    value: val,
  };
  Object.defineProperty(wrapper, '__v_isref', {
    value: true,
  });
  return reactive(wrapper);
}

为了判断一个对象是否是原始值的包裹对象，添加一个不可写不可枚举属性来判断。

6.2 响应丢失问题

响应丢失问题就是我们在通过扩展运算符获取响应式对象的值后，我们得到的值变成了普通对象。

const obj = reactive({ foo: 1, bar: 2 })
const newObj = {
  ...obj,
}
effect(() => {
  console.log(newObj.foo)
})
obj.foo = 100

可以在新建对象，然后把对应属性的get访问器设置为读取之前对象的值，这样就可以出发响应了。

function toRef(obj, key) {
  const wrapper = {
    get value() {
      return obj[key]
    },
    set(val) {
      obj[key] = val
    }
  }
  Object.defineProperty(wrapper, '__v_isref', {
    value: true,
  })
  return wrapper
}

const newObj = {
  foo: toRef(obj, 'foo'),
  bar: toRef(obj, 'bar'),
}

如果属性多的时候，需要进行批量转换

function toRefs(obj) {
  const ret = {}
  for (let key in obj) {
    ret[key] = toRef(obj, key)
  }
  return ret
}
const newObj = { ...toRefs(obj) }

自动脱 ref

我们在模板中使用 ref 对象值的时候，不需要用户再添加 .value 去使用，所以需要有一个自动脱 ref 的功能。思路就是通过一个 Proxy 代理对象，在读取的值为 ref 时，再读取对象的 .value 值，同时设置值也应该有自动设置到 value 属性的功能。

function proxyRefs(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const value = Reflect.get(target, key, receiver)
      return value.__v_isRef ? value.value : value
    },
    set(target, key, newValue, receiver) {
      const value = target[key]
      if (value.__v_isRef) {
        value.value = newValue
        return true
      }
      Reflect.set(target, key, newValue, receiver)
    },
  })
}

响应式总结