一起学Vue3源码，实现最简Vue3【12】 - 实现 isRef 和 unRef 功能

实现 isRef 和 unRef 功能

什么是isRef & unRef ？ isRef 判断一个数据是否是用ref 声明的响应式数据 unRef 省略了ref .value 繁琐操作，直接获取值

ref.spec.ts

import { effect } from "../src/effect";
import { reactive } from "../src/reactive";
import { isRef, proxyRefs, ref, unRef } from "../src/ref";

describe("ref", () => {
  ...
  it("isRef", () => {
    const a = ref(1);
    const user = reactive({
      age: 10,
    });

    expect(isRef(a)).toBe(true);
    expect(isRef(1)).toBe(false);
    expect(isRef(user)).toBe(false);
  });

  it("unRef", () => {
    const a = ref(1);

    expect(unRef(a)).toBe(1);
    expect(unRef(1)).toBe(1);
  });
});

ref.ts

isRef：因为会传入一个数据，如果是ref声明的响应式，就相当于new RefImpl()，所以直接在RefImpl 中，声明一个public 属性，标识是ref类型，isRef判断时，直接取，有则是ref，没有则不是ref类型。 unRef：判断是否是ref类型，是的话，返回 .value，不是则返回 value 具体如下：

class RefImpl {
  private _value: any;
  public dep: Set<RefImpl>;
  // 缓存最原始的数据，因为可能接收到单一类型或者对象类型
  private _rawValue: any;
  // ref 标识
  public __v_isRef: Boolean = true;
  ...
}

export function isRef(ref) {
  return !!ref.__v_isRef;
}

export function unRef(ref) {
  return isRef(ref) ? ref.value : ref;
}

以上，执行测试，通过。

最后

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