readonly
readonly和 reactive 类似，只不过，readonly不需要进行依赖收集，并且不可被 set，我们只需要在 set 时报错即可
仍然从测试用例入手
it("readonly", () => { const original = { foo: 1, bar: { baz: 2 } }; const wrapped = readonly(original); expect(wrapped).not.toBe(original); expect(wrapped.foo).toBe(1); }) 复制代码
讲一个对象 readonly 包装之后，值是一样的，但是对象的比较是不同的
export function readonly(raw: Record<any, any>) { return new Proxy(raw, { get: createGetter(true), set() { // readonly 不可 set, 抛出异常 // TODO 自定义异常 return true } }) } 复制代码
这里因为 get 的逻辑用到了两次，所以提取出来
function createGetter(isReadOnly: boolean = false) { return function get(target: Record<any, any>, key: string | symbol) { const res = Reflect.get(target, key); // 如果不是 readonly 收集依赖 if (!isReadOnly) track(target, key); return res; } } 复制代码
然后我们来完善 readonly set 时的报错
it("warn when set", () => { console.warn = jest.fn() const user = readonly({ age: 10 }) // @ts-expect-error user.age = 11 expect(console.warn).toBeCalled() }) 复制代码
在 readonly 被 set 时调用 console.warn
export const readonlyHandlers = { get: readonlyGet, // 将原来的creater 提取出去 set(target: Record<any, any>, key: string, value: any) { // readonly 不可 set, 抛出异常 console.warn(`key: ${key}设置失败, 因为${target}是 readonly 类型`) return true } } 复制代码
isReactive & isReadonly
这两个API 用于判读是否是响应式对象和是否为只读对象。这两个 API 的实现思路是一样的，在 proxy 代理 getter 的时候判断是否为 isReactive 和 isReadonly，然后返回对应的结果即可。
首先是 siReactive， 还是先来写测试用例
it('happy path', () => { const original = { foo: 1 }; const observed = reactive({ foo: 1 }); expect(observed).not.toBe(original); expect(observed.foo).toBe(1); expect(isReactive(observed)).toBe(true) expect(isReactive(original)).toBe(false) }) 复制代码
这里沿用之前的测试用例，添加了两行isReactive 相关的断言，分别对普通对象和 reactive 对象进行判断。
然后回到 reactive.ts 文件中实现这个方法，内容很简单，返回代理对象的指定字段即可
export function isReactive(value: any) { return !!value[ReactiveFlags.IS_REACTIVE] } export enum ReactiveFlags { IS_REACTIVE = '__v_isReactive', IS_READONLY = '__v_isReadonly', } 复制代码
然后再 getter 中添加判断条件
// 返回 getter function createGetter(isReadOnly: boolean = false) { return function get(target: Record<any, any>, key: string | symbol) { if (key === ReactiveFlags.IS_REACTIVE) return !isReadOnly const res = Reflect.get(target, key); // 如果不是 readonly 收集依赖 if (!isReadOnly) track(target, key); return res; } } 复制代码
如果是代理对象，并且访问的是指定字段，并且不是 readonly，那么就会返回 true；如果不是代理对象，那么取指定字段时会是 undefined，经过取非再取非之后就是一个 boolean 值。
执行测试
isReadonly同理，只是将读取的字段修改一下
最终的代码如下
// 返回 getter function createGetter(isReadOnly: boolean = false) { return function get(target: Record<any, any>, key: string | symbol) { if (key === ReactiveFlags.IS_REACTIVE) return !isReadOnly else if (key === ReactiveFlags.IS_READONLY) return isReadOnly const res = Reflect.get(target, key); // 如果不是 readonly 收集依赖 if (!isReadOnly) track(target, key); return res; } } 复制代码
reactive 嵌套
使用过Vue 的应该都知道，Vue 的响应式是深层的，即深层对象也会被进行响应式处理，但是上面的逻辑我们只实现了一层的响应式代理，下面我们就来讲代理转为递归的。
首先是测试用例，我们需要判断对象的子级对象是被也被代理
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) }) 复制代码
实现这个很简单，只需要在返回值的时候判断值的类型是否为对象类型即可
// 返回 getter function createGetter(isReadOnly: boolean = false) { return function get(target: Record<any, any>, key: string | symbol) { if (key === ReactiveFlags.IS_REACTIVE) return !isReadOnly else if (key === ReactiveFlags.IS_READONLY) return isReadOnly const res = Reflect.get(target, key); if (isObject(res)) { // 如果是对象类型, 递归代理 return reactive(res) } // 如果不是 readonly 收集依赖 if (!isReadOnly) track(target, key); return res; } } const isObject = val => val !== null && typeof val === 'object' 复制代码
同理 readonly 的代理任然需要递归处理
it('nested readonly', () => { const original = { foo: 1, bar: { baz: 2 } }; const wrapped = readonly(original); expect(isReadonly( wrapped )).toBe(true) expect(isReadonly(original)).toBe(false) expect(isReadonly( original.bar )).toBe(false) expect(isReadonly( wrapped.bar )).toBe(true) }) 复制代码
此时执行测试是有问题的，因为经过我们的封装后，reactive 和 readonly 的 getter 调用的是同一个，所以我们在刚才的地方要加上判断。
// 返回 getter function createGetter(isReadonly: boolean = false) { return function get(target: Record<any, any>, key: string | symbol) { if (key === ReactiveFlags.IS_REACTIVE) return !isReadonly else if (key === ReactiveFlags.IS_READONLY) return isReadonly const res = Reflect.get(target, key); if (isObject(res)) { // 如果是对象类型, 递归代理, 根据类型不同调用不同得到方法 return isReadonly ? readonly(res) : reactive(res) } // 如果不是 readonly 收集依赖 if (!isReadonly) track(target, key); return res; } }
