13、带你一步步实现vue3源码之isProxy

301 阅读1分钟

isProxy

根据官方的解释,isProxy是用来检查对象是否是由 reactivereadonly 创建的 proxy。

编写测试

这一节,就可以在之前的单例基础上去添加断言即可

// src/reactivity/tests/reactive.spec.ts
import {readonly, isReadonly, isProxy} from '../reactive'
describe("reactive", () => {
  it("happy path", () => {
    ...
    expect(isProxy(obj)).toBe(true)
  })
})
// src/reactivity/tests/reactive.spec.ts
import {readonly, isReadonly, isProxy} from '../reactive'
describe("readonly", () => {
  it("happy path", () => {
    ...
    expect(isProxy(wrapped)).toBe(true)
  })
})

编码

现在就根据上面的测试代码来实现isProxy的相关逻辑,可见还是从reactive.ts导出的一个函数,接收一个响应式对象作为参数。

export function isProxy (value) {
  return isReactive(value) || isReadonly(value)
}

逻辑代码就是这么简单,因为在之前的章节中,我们已经通过函数完成了判断是否是reactive和是否是readonly类型,既然isProxy是用来判断这两种类型,那么我们直接导出之前的方法即可。

总结

这一章节没有编写新的代码,只是对之前实现的isReactiveisReadonly进行一个整合,通过isProxy返回他们的结果,用来判断是否是一个通过reactivereadonly创建的proxy对象。