在 Vue 组合 API 中迭代代理

Question

我有一个从反应性API派生emptyRowsRemoved计算值。我需要遍历此值。但是由于computed()返回了一个代理，我不再能够用.forEach迭代它。

我很好奇，迭代代理的唯一方法是unRef值吗？ 似乎应该有某种方法来迭代代理。我搜索了这个，但我找不到这个问题的答案。

Answer 1

computed()不返回Proxy。相反，它返回一个ref，其value属性包含目标数据。

我很好奇，迭代代理的唯一方法是取消引用值吗？

实际上，您确实需要使用unref()解包ref，或者直接引用其.value属性来访问目标数组数据(除非使用下面描述的新反应性转换)。

假设您的用法包括一个computed()，其值以某种方式是Proxy，例如在以下人为示例中：

const myComputedProxy = computed(() => proxyOf(/* my array */))

。Proxy本身应与目标变量完全相同。如果Proxy用于数组，请直接使用该Proxy，就好像它是数组本身一样。也就是说，您可以在Proxy上使用.forEach()，它将调用转发到底层Array：

myComputedProxy.value.forEach(x => console.log(x))
// or
import { unref } from 'vue'
unref(myComputedProxy).forEach(x => console.log(x))

演示 1

使用反应性变换

然而，Vue 3 的反应性变换(截至vue@3.2.26年实验性)避免了解开ref包装的要求，但你必须使用<script setup>块(而不是在选项 API 中setup())。不要从vue导入computed(或ref)，而是使用全局定义的$computed(或$ref)编译器宏：

<script setup>            
const myComputedProxy = $computed(() => proxyOf(/* my array */))
myComputedProxy.forEach(x => console.log(x))
</script>

演示 2