手写mini版本的Vue3--实现 reactive 和 readonly 嵌套对象转换功能

介绍

开头继续感谢崔大的mini-vue 项目。

项目地址:github.com/cuixiaorui/…

强烈建议大家把项目 down 下来，运行一下，看VUE3 的整体运行逻辑。

reactive 嵌套

  test("nested reactives", () => {
    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);
  });
  

以上是我们用来测试 reactive 的的嵌套，数组，对象是否可以转换成响应式对象的单元测试。

其实也很简单，我们只需要调用get 的时候做一下判断 res 返回值，如果是对象，我们就重新调用reactive 并把 res 传入进去就好

if (isObject(res)) {
    return reactive(res)
  }

判断对象isObject

export const isObject  = (value) => {
  return value !== null && typeof value === 'object'
}

readonly 嵌套

其实跟 reactive 差不多,不用是isReadonly就调用 readonly 就好了

if (isObject(res)) {
     return isReadonly ? readonly(res) : reactive(res);
 }

结尾

项目已经放到我的 GitHub 上面了，欢迎大家去start。

本次 commit地址：github.com/moyuhaokan/…

我的项目地址：github.com/moyuhaokan/…

再次推荐崔大的项目：github.com/cuixiaorui/…