在 Vue Composition API 中迭代代理答案

【问题标题】：Iterating over a Proxy in Vue Composition API在 Vue Composition API 中迭代代理
【发布时间】：2022-01-17 05:43:29
【问题描述】：

我有一个从 Reactivity API 派生的计算值 emptyRowsRemoved。我需要迭代这个值。但是因为computed() 返回了一个代理，我不再能够使用.forEach 对其进行迭代。

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

【问题讨论】：

标签： vue.js vuejs3 vue-composition-api javascript-proxy

【解决方案1】：

computed() 不返回Proxy。而是returns a 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))

demo 1

使用反应性变换

但是，Vue 3 的 Reactivity Transform（vue@3.2.26 的实验性）避免了解开 ref 的要求，但您必须使用 <script setup> block（而不是选项 API 中的 setup()）。不要从vue 导入computed（或ref），而是使用全局定义的$computed（或$ref）编译器宏：

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

demo 2

【讨论】：

感谢您的解释和 rfcs 的链接！终于不再需要.value