vue3存储数组 ref有值 ref.value为空

可能是因为您在初始化 ref 时未将其设置为数组类型。在 Vue 3 中，ref 可以存储任何类型的数据，包括对象、数组等。如果您希望将 ref 设置为数组类型，请使用以下代码：

import { ref } from 'vue'

const myArray = ref([])

// 将值添加到数组中
myArray.value.push('value1')
myArray.value.push('value2')

console.log(myArray.value) // 输出：["value1", "value2"]

请确保在操作 ref 数组时，使用 `myArray.value` 来访问数组。

相关问题

vue3 ref数组

在Vue 3中，可以使用ref()函数创建一个ref类型的数组。ref()函数接受一个初始值作为参数，并返回一个ref对象。这个ref对象在数组中的每个元素都可以通过`.value`来访问或修改。但是需要注意的是，当ref作为响应式数组的元素被访问时，需要使用`.value`来解包。例如，在一个reactive数组中，如果数组的某个元素是ref类型的，就需要使用`.value`来访问该元素的值。同样地，在一个原生的集合类型（比如Map）中，如果Map的某个键对应的值是ref类型的，同样需要使用`.value`来访问该值。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue3超详细的ref()用法，看这一篇就够了](https://blog.csdn.net/EchoLiner/article/details/130445600)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

vue3 ref 数组

在Vue3中，ref数组是指一个包含多个ref对象的数组。使用ref数组可以在组件中管理多个响应式引用值。

要创建一个ref数组，可以使用reactive函数来创建一个响应式的数组，并将每个元素都包装在ref函数中。例如，可以使用以下代码创建一个包含多个ref对象的数组：

import { ref, reactive } from 'vue';

const books = reactive([
  ref('Book 1'),
  ref('Book 2'),
  ref('Book 3')
]);

在访问ref数组中的元素时，需要使用`.value`来解包ref对象的值。例如，可以使用以下代码访问ref数组中的第一个元素：

console.log(books<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
-  *1* *2* *3* [Vue3超详细的ref()用法，看这一篇就够了](https://blog.csdn.net/EchoLiner/article/details/130445600)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]