vue3 ref 定义的数组

Vue3中的`ref`是用来创建响应式引用的函数。当你使用`ref`定义一个数组时，这个数组本身会变成响应式的。这意味着，如果你修改了这个数组（比如添加、删除元素或者替换整个数组），Vue会自动更新那些依赖于这个数组的数据的视图。

在Vue3中定义一个响应式数组的基本语法如下：

import { ref } from 'vue';

const myArray = ref(['a', 'b', 'c']);

`myArray`是一个`Ref`对象，可以通过`myArray.value`来访问和修改其内部的数组。例如，向数组中添加一个新元素：

myArray.value.push('d'); // 这会更新视图，因为视图依赖于这个数组

需要注意的是，虽然`ref`返回的对象是响应式的，但对象内部的属性并不是。这就意味着如果你直接修改数组中的对象，Vue将不会追踪这些变化。在这种情况下，你可能需要使用`reactive`或`toRaw`和`markRaw`来保持对象的非响应式状态。

例如，如果有一个对象列表，你可以这样定义：

const myList = reactive([{ name: 'Alice' }, { name: 'Bob' }]);
// 如果你想要某个对象保持非响应式，可以这样做：
const myItem = markRaw({ name: 'Charlie' });
myList.push(myItem);