vue3 ref 数组

import { ref, onMounted } from 'vue';

export default {
  setup() {
    // 使用 ref 创建一个响应式的数组
    const items = ref([1, 2, 3, 4, 5]);

    // 修改数组中的元素
    const addItem = () => {
      items.value.push(items.value.length + 1);
    };

    // 在组件挂载时执行一些操作
    onMounted(() => {
      console.log('组件已挂载，当前数组:', items.value);
    });

    return {
      items,
      addItem
    };
  }
};

解释说明：

1. ref：ref 是 Vue 3 中用于创建响应式数据的函数。它可以包装基本类型（如数字、字符串）和复杂类型（如对象、数组）。在这个例子中，我们使用 ref 来创建一个包含数字的数组，并将其初始化为 [1, 2, 3, 4, 5]。

2. items.value：当我们使用 ref 包装了一个值后，我们需要通过 .value 来访问或修改这个值。因此，在修改数组时，我们使用 items.value.push() 方法来向数组中添加新元素。

3. addItem 函数：这个函数用于向数组中添加一个新的元素，新元素的值是当前数组长度加 1。

4. onMounted 钩子：这是一个组合式 API 的生命周期钩子，类似于选项式 API 中的 mounted。它在组件挂载完成后执行，这里我们简单地打印了当前的数组内容。

5. 返回值：最后，我们将 items 和 addItem 返回，以便在模板中使用这些变量和方法。