介绍
开头继续感谢崔大的mini-vue 项目。
强烈建议大家把项目 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/cuixiaorui/…