【mini-vue】实现reactive 和 readonly 嵌套对象功能

54 阅读1分钟

实现reactive 和 readonly 嵌套对象功能

主要思路

当访问对象的时候,进入get函数,判断当前res是否是普通对象,如果是的话,那么再根据readonly的值去判断是调用readonly还是reactive 给他变成响应式的

代码

image.png

单元测试

通过 image.png

实现 shallowReadonly

shallowReadonly: shallowReadonly 是一个函数,用于创建一个只读的响应式对象,但是只会对对象的第一层属性进行响应式处理,不会对嵌套的对象进行处理。

主要思路

封装一个shallowReadonly对象,返回的还是proxy代理对象。 给 get 函数新增一个shallow参数,类型为布尔值,查看当前对象是否需要shallow,如果需要,那么直接返回res。

代码

只有二行

image.png

单元测试

image.png