一起学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,万分感谢!