uni-appVue3版本项目出现Proxy代理对象没办法正常取值问题解决
习惯了使用Vue2版本的uniapp项目,直到后来想升级版本,改用Vue3版本就会遇到一些无法正常取值(访问属性)问题,其中最显著问题就是Proxy代理造成的
在我们用浏览器调试的时候,遇到如同下图这样,出现这个data不是原来的Object对象,这是叫Proxy代理
Proxy代理
Proxy的意思
Proxy就是代理,可以理解为一个拦截器,当我们操作一个代理了的对象时,它都会对对象的操作进行拦截,从而进行监测和改写
- Proxy代理是响应式对象
- 一个对象的响应式副本
为什么会出现这个呢,vue中有如下情况肯定会发生
export default {
data(){
return {
canvas:{ },//...这里定义的一些变量,都会被转换为响应式对象
}
}
}
要定义非响应式对象,直接在对创建的应用实例对象this
设置属性如canvas
即可
this.canvas = {};
Vue响应式
Vue2 实现响应式的基础原理是用方法Object.definedProperty()
,实现简单的数据监听拦截,
而Vue3 就改换成了用Proxy代理,相比Vue2,其性能得到提升,
要想还原,只需调用以下这个返回对象方法即可
data = markRaw(data);
使用前,需要先导入来自Vue的方法
import { markRaw } from "vue";
//...
如果嫌markRaw
没作用,就试试转JSON序列化,再还原
data = JSON.parse(JSON.stringify(data));
标记对象
标记一个对象,使其永远不会转换为 proxy,返回对象本身。
markRaw(proxy)
其它方法
检查参数是否是响应式副本(proxy)
isReactive(object)
返回创建的响应式副本(proxy)
reactive(object)
讲到这里,学到了吗
想知道 Proxy 怎样用,点此 Javascript Proxy 前往了解
这篇好文章是转载于:编程之路
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 编程之路
- 本文地址: /boutique/detail/tanhhgbibh
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22