Vue3中ref数据去重后出现Proxy(Object)的原因及解决方案
在使用Vue3开发过程中，很多开发者会遇到一个奇怪的现象：当我们对ref数据进行去重操作后，控制台打印出来的结果竟然是Proxy(Object)，而不是我们期望的普通数组。这究竟是怎么回事呢？本文将深入探讨这个问题的根源，并提供详细的解决方案。
问题现象
让我们先来看一个具体的例子，假设你有一个包含重复元素的响应式数组：
import { ref } from 'vue'
const list = ref([1, 2, 2, 3, 3, 3, 4])
console.log(list.value) // 原始数据：[1, 2, 2, 3, 3, 3, 4]当我们尝试对这个数组进行去重操作时，比如使用Set：
const uniqueList = [...new Set(list.value)] console.log(uniqueList) // 期望：[1, 2, 3, 4]，但实际可能看到：Proxy(Object)
或者使用了某些数组方法后：
const uniqueList = list.value.filter((item, index) => {
return list.value.indexOf(item) === index
})
console.log(uniqueList) // 同样可能出现Proxy(Object)根本原因：Vue3的响应式代理机制
要理解这个问题，我们首先需要了解Vue3的响应式系统是如何工作的。Vue3使用Proxy来实现数据的响应式，当你创建一个ref对象时，Vue实际上创建了一个Proxy来包装你的数据。
Proxy的工作原理
Proxy是ES6引入的一个强大特性，它可以在目标对象之前架设一层"拦截"，外界对该对象的访问都必须先通过这层拦截。Vue3利用这个特性来实现数据的响应式更新。
当你执行以下代码时：
const data = ref([1, 2, 2, 3])
Vue实际上创建了一个Proxy对象来包装你的数组。这个Proxy对象会拦截对数组的各种操作，比如push、pop、splice等，从而在数据变化时自动触发视图更新。
为什么去重后会出现Proxy(Object)
问题的关键在于，当我们对ref数据进行操作时，Vue的响应式系统可能会在某些情况下返回Proxy对象而不是原始值。具体来说：
引用传递问题：在JavaScript中，对象和数组是通过引用传递的。当我们对ref中的数组进行操作时，可能会无意中保持了与原始Proxy的引用关系。
响应式系统的优化：Vue3的响应式系统为了性能考虑，在某些情况下会复用已经存在的Proxy对象。
数组方法的副作用：某些数组方法可能会触发Vue的响应式系统，导致返回值被包装成Proxy。
常见场景分析
场景一：直接操作ref的value
import { ref } from 'vue'
const list = ref([1, 2, 2, 3])
// 这种情况下通常不会出现问题
const unique1 = [...new Set(list.value)]
console.log(unique1) // [1, 2, 3] - 正常
// 但如果在这个过程中触发了响应式依赖收集...
list.value.push(4) // 这会触发响应式更新
const unique2 = [...new Set(list.value)]
console.log(unique2) // 可能看到Proxy(Object)场景二：在组件方法中操作
import { ref } from 'vue'
export default {
setup() {
const list = ref([1, 2, 2, 3])
const getUniqueList = () => {
// 在组件方法中操作，更容易出现Proxy问题
return [...new Set(list.value)]
}
// 调用方法时可能出现Proxy(Object)
console.log(getUniqueList())
}
}场景三：与其他响应式API结合使用
import { ref, computed } from 'vue'
const list = ref([1, 2, 2, 3])
// 与computed结合使用时也可能出现问题
const computedList = computed(() => [...new Set(list.value)])
console.log(computedList.value) // 可能是Proxy(Object)解决方案
了解了问题的根源后，我们可以采用以下几种方法来解决这个问题：
方案一：使用JSON.parse(JSON.stringify())深拷贝
这是最简单直接的解决方案，通过序列化和反序列化来创建全新的数组：
import { ref } from 'vue'
const list = ref([1, 2, 2, 3])
// 方法1：使用JSON方法深拷贝
const uniqueList = JSON.parse(JSON.stringify([...new Set(list.value)]))
console.log(uniqueList) // [1, 2, 3] - 正常数组优点：简单易懂，能彻底断开与原始Proxy的引用关系。
缺点：无法处理函数、undefined、循环引用等特殊值。
方案二：使用扩展运算符或Array.from()
有时候，简单地使用扩展运算符或Array.from()就能解决问题：
import { ref } from 'vue'
const list = ref([1, 2, 2, 3])
// 方法2：使用扩展运算符
const uniqueList1 = [...new Set(list.value)]
// 方法3：使用Array.from()
const uniqueList2 = Array.from(new Set(list.value))
// 如果上述方法仍然返回Proxy，可以尝试再次解构
const finalList = [...uniqueList1]
console.log(finalList) // [1, 2, 3]方案三：手动遍历去重
最稳妥的方法是手动实现去重逻辑，完全避免可能的Proxy问题：
import { ref } from 'vue'
const list = ref([1, 2, 2, 3])
// 方法4：手动遍历去重
function manualUnique(arr) {
const result = []
for (let i = 0; i < arr.length; i++) {
if (result.indexOf(arr[i]) === -1) {
result.push(arr[i])
}
}
return result
}
const uniqueList = manualUnique(list.value)
console.log(uniqueList) // [1, 2, 3]方案四：使用第三方库的深拷贝方法
如果需要处理复杂的数据结构，可以使用lodash等第三方库的深拷贝方法：
import { ref } from 'vue'
import { cloneDeep } from 'lodash'
const list = ref([1, 2, 2, 3])
// 方法5：使用lodash的深拷贝
const uniqueList = cloneDeep([...new Set(list.value)])
console.log(uniqueList) // [1, 2, 3]方案五：在模板中使用时的特殊处理
如果在Vue模板中直接使用去重后的数据，可能需要额外的处理：
<template> <div>
预防措施
为了避免遇到Proxy(Object)的问题，可以采取以下预防措施：
理解响应式原理：深入理解Vue3的响应式系统，知道何时会创建Proxy对象。
谨慎操作响应式数据：在对响应式数据进行操作时，注意可能的引用关系。
使用合适的API：优先使用Vue提供的响应式API，避免直接操作原始数据。
添加调试代码：在关键位置添加console.log(typeof variable)来检查数据类型。
总结
Vue3中ref数据去重后出现Proxy(Object)的问题，本质上是由Vue3的响应式Proxy机制导致的。当我们在操作响应式数据时，可能会无意中保持与原始Proxy的引用关系，或者在特定情况下触发了响应式系统的优化机制，导致返回值仍然是Proxy对象。
解决这个问题的关键在于断开与原始Proxy的引用关系，可以通过深拷贝、手动遍历、使用第三方库等方法来实现。在实际开发中，建议根据具体场景选择最合适的解决方案，并注意预防此类问题的发生。
理解Vue3的响应式原理不仅能帮助我们解决这类具体问题，还能让我们更好地利用Vue3的强大功能，编写出更高效、更可靠的代码。