Vue 3中的ref和reactive定义数组

在Vue 3中，你可以使用ref和reactive来定义响应式的数据。当涉及到数组时，这两个函数都可以用来创建响应式数组，但它们的工作方式和用法有所不同。
1. ref
ref函数用于创建一个响应式引用。它接受一个初始值，并返回一个响应式对象。要定义一个响应式数组，你可以使用ref函数来创建一个包含初始值的数组。
示例：

import { ref } from 'vue';
const myArray = ref([1, 2, 3]);
console.log(myArray.value); // 输出：[1, 2, 3]

在上面的示例中，我们使用ref函数创建了一个名为myArray的响应式数组，并初始化为[1, 2, 3]。通过访问myArray.value，我们可以获取到该数组的值。
2. reactive
reactive函数用于创建一个响应式对象。它接受一个初始值，并返回一个响应式对象。与ref不同的是，reactive可以用于创建任何类型的响应式数据，包括数组、对象和其他复杂数据结构。
示例：

import { reactive } from 'vue';
const myArray = reactive([1, 2, 3]);
console.log(myArray); // 输出：[1, 2, 3]

在上面的示例中，我们使用reactive函数创建了一个名为myArray的响应式数组，并初始化为[1, 2, 3]。通过访问myArray，我们可以直接获取到该数组的值。
区别

• ref主要用于创建响应式引用，而reactive可以用于创建任何类型的响应式数据。
• 使用ref创建的响应式数据可以通过.value属性来访问原始值，而使用reactive创建的响应式数据可以直接访问原始值。
• 在处理复杂数据结构时，使用reactive更加灵活和方便。
  总的来说，当你要定义一个响应式数组时，你可以根据具体需求选择使用ref或reactive函数。如果你只需要处理简单的数组值，并且想要通过.value属性访问原始值，那么使用ref可能更加合适。如果你需要处理复杂的数据结构，或者想要直接访问原始值，那么使用reactive可能更加方便。