• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

uni-appVue3版本项目出现Proxy代理对象没办法正常取值问题解决

武飞扬头像
TA远方
帮助3

习惯了使用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
系列文章
更多 icon
同类精品
更多 icon
继续加载