一起学Vue3源码，实现最简Vue3【10】 - 实现 isProxy 功能

实现 isProxy 功能

什么是isProxy？
检查一个对象是不是通过 reactive 或者 readonly 创建的响应式对象

实际上就是 isReactive 和 isReadonly 的结合体，测试先行

reactive.spec.ts

import { isProxy, isReactive, reactive } from "../src/reactive";

describe("reactive", () => {
  it("happy path", () => {
    const original = { foo: 1 };
    const observed = reactive(original);

    expect(isProxy(observed)).toBe(true);
  });
  ...
});

readonly.spec.ts

import { isProxy, isReadonly, readonly } from "../src/reactive";

describe("readonly", () => {
  it("happy path", () => {
    // set not be triggered
    const original = { prop: 1, bar: { age: 10 } };
    const wrapped = readonly(original);

    expect(isProxy(wrapped)).toBe(true);
  });
  ...
});

接下来就是具体实现

reactive.ts

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

好了，最后执行全部测试。通过

最后

附上git代码地址：mini-vue，欢迎大家踊跃探讨，如果可以的话，帮忙点点 git star，万分感谢！