手写mini版本的Vue3--实现 shallowReadonly 功能 & 实现 isProxy 功能

355 阅读1分钟

介绍

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

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

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

实现shallowReadonly

这个其实就是 shallow 浅层拷贝 和 readonly 的集合。也就是说,只有外层的对象才有响应式对象,而且这个响应式对象是只读的。

首先我们需要从 baseHandler 里面导出shallowReadonlyHandlers 然后开始导出我们这个函数

export function shallowReadonly(raw) {
  return createReactiveObject(raw, shallowReadonlyHandlers )
}

然后我们去baseHandler 实现一下

首先是如果只是一个shallow 的话,我们在收集完依赖之后就不需要执行别的逻辑了。直接把响应式对象返回即可

function createGetter(isReadonly = false, shallow = false) {
    if (shallow) {
      return res
    }
}

然后我们可以使用 以前就定义好的extend 来把readonlyHandlers 给复用起来,然后重写一下 get 方法,也就是传入 shallow 为 true

const shallowReadonlyGet = createGetter(true, true)
export const shallowReadonlyHandlers = extend({}, readonlyHandlers, {
  get: shallowReadonlyGet,
})



实现 isProxy

这个 isProxy 很简单,就是通过检测对象是不是通过 reactive 或readonly 创建的proxy

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

结尾

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

本次 commit地址: 1 github.com/moyuhaokan/… 2

github.com/moyuhaokan/…

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

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