Vue3 isProxy,isReactive,isReadonly 三者解析

1、isProxy

作用:判断当前数据是否为代理数据。

注意:它只对通过 reactive,readonly,shallowReactive,shallowReadonly 这四个方法包裹的数据返回true,对于 ref 以及通过 new Proxy 代理的数据返回都是false。

2、isReactive

作用:判断当前数据是否reactive包裹的数据。

注意:只对 reactive,shallowReactive 包裹的数据为true,其他为false。

3、isReadonly

作用:判断数据是否为readonly包裹的数据。

注意:只对 readonly,shallowReadonly 包裹的数据返回true,其他为false。

4、注意

如果 readonly 包裹的是一个 reactive 数据的话,那么 isReadonly, isReactive 都为true。

但是如果 reactive 包裹的是一个 readonly 的数据的话,那么 isReadonly 为true,isReactive 为false。

原因是:readonly 包裹的数据是一个只读的数据,不能在通过reactive方法进行代理。可以查看这两的数据。

readonlyObj

reactiveObj

可以看出 readonlyObj 被代理的2次,而 reactiveObj 被代理1次。所以 reactive(readonly(obj)) 这种只会被人 readonly 代理,不会再被 reactive 代理了。

相关推荐
90后的晨仔12 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(二)?
前端·vue.js
90后的晨仔12 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(一)?
前端·vue.js
90后的晨仔12 小时前
Vue 异步组件(defineAsyncComponent)全指南:写给新手的小白实战笔记
前端·vue.js
木易 士心12 小时前
Vue 与 React 深度对比:底层原理、开发体验与实际性能
前端·javascript·vue.js
冷冷的菜哥12 小时前
react多文件分片上传——支持拖拽与进度展示
前端·react.js·typescript·多文件上传·分片上传
玄魂13 小时前
VChart 官网上线 智能助手与分享功能
前端·llm·数据可视化
Lucky GGBond13 小时前
Vue + Spring Boot 实现 Excel 导出实例
vue.js·spring boot·excel
wyzqhhhh13 小时前
插槽vue/react
javascript·vue.js·react.js
许___13 小时前
Vue使用原生方式把视频当作背景
前端·javascript·vue.js
萌萌哒草头将军14 小时前
尤雨溪强烈推荐的这个库你一定要知道 ⚡️⚡️⚡️
前端·vue.js·vite