javascript - Vue 3，组合 API，引用数组不起作用

Question

请看下面的代码。

<template>
  <div v-for="item in arr" :key="item">{{ item }}</div>
</template>

<script>
import { ref } from "vue";

export default {
  name: "TestArr",
  setup() {
    const arr = [];
    arr.push(ref("a"));
    arr.push(ref("b"));
    arr.push(ref("c"));
    return { arr };
  }
};
</script>

输出如下

{ "_rawValue": "a", "_shallow": false, "__v_isRef": true, "_value": "a" }
{ "_rawValue": "b", "_shallow": false, "__v_isRef": true, "_value": "b" }
{ "_rawValue": "c", "_shallow": false, "__v_isRef": true, "_value": "c" }

预期产出

a
b
c

我必须在模板中调用 item.value 才能使其工作。
vue3 中这种情况的解决方法是什么？
干杯!

Answer 1

你这样做是不对的;尝试关注

setup() {
    const arr = ref([]);
    arr.value.push("a");
    arr.value.push("b");
    arr.value.push("c");
    return { arr };
  }

将 ref 项添加到普通数组是没有意义的。数组本身应该是 ref。