版本

2.7.14

复现链接

codesandbox.io

重现步骤

将一个或多个引用包裹在数组中，并尝试使用 v-for 或索引引用在模板中渲染。

<div v-for="(count, i) in counts" :key="i">
  {{ count }}
</div>

...

const yesCount = ref(0);
const noCount = ref(0);
const yes = computed(() => "Yes: " + yesCount.value);
const no = computed(() => "No: " + noCount.value);

const counts = [yes, no];

预期结果

模板应该自动解包引用。

实际发生的情况

渲染时出现控制台错误：

[Vue warn]: Error in render: "TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Watcher'

    |     property 'vm' -> object with constructor 'VueComponent'

    |     property '_scope' -> object with constructor 'EffectScope'

    |     property 'effects' -> object with constructor 'Array'

    --- index 0 closes the circle"

复现链接有两个替代工作示例：

• AppWorking.vue :在模板中手动使用 unref 解包每个数组元素
• AppWorkingOptionsApi.vue :通过选项 API 在模板中创建数组作为计算属性。

我尝试将数组包裹在引用或计算引用中，但都没有成功。
这个相同的复现在 Vue 3 SFC Playground中没有问题。
我在尝试渲染一个对象列表时遇到了这个问题，其中每个对象都包含一个值为 ref 的属性。