reactive readonly嵌套对象转换功能实现详解

发布时间：2022-12-26 09:22

这篇文章主要为大家介绍了reactive readonly嵌套对象转换功能实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助!

一、单元测试

reactive

// src/reactivity/tests/reactive.spec.ts
it('nested reactive', () => {
  const original = {
nested: { foo: 1 },
array: [{ bar: 2 }]
  };
  const observed = reactive(original);
  expect(isReactive(observed.nested)).toBe(true);
  expect(isReactive(observed.array)).toBe(true);
  expect(isReactive(observed.array[0])).toBe(true);
});

readonly

it('nested readonly', () => {
  const original = { foo: 1, bar: { baz: 2 } };
  const wrapped = readonly(original);
  expect(isReadonly(wrapped)).toBe(true);
  expect(isReadonly(wrapped.bar)).toBe(true);
});

二、代码实现

为什么嵌套的深层对象没有转换成reactive、readonly呢？

因为Proxy劫持的是对象本身，并不能劫持子对象的变化。

其实通过单测可以看出，我们只需要将reactive嵌套的里层对象也转换成reactive，将readonly嵌套的里层对象也转换成readonly。

那只需要在get中，返回res的时候，将res转换成相应的代理就可以了。

function createGetter(isReadonly = false) {
  return function get(target, key) {
const res = Reflect.get(target, key);
if (key === ReactiveFlags.IS_REACTIVE) {
  return !isReadonly;
} else if (key === ReactiveFlags.IS_READONLY) {
  return isReadonly;
}
if (isObject(res)) {
  return isReadonly ? readonly(res) : reactive(res);
}
if (!isReadonly) {
  track(target, key);
}
return res;
  };
}

跑一下完整的单测结果看下：