【uniapp】Vue3版本项目出现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 前往了解