Vue3中如何处理数组形式的双向数据绑定？

在Vue3中，处理数组形式的双向数据绑定通常使用`ref`和`v-model`结合。`ref`用于获取一个响应式的变量，而`v-model`用于在模板上实现数据绑定。以下是一个基本的例子：

<template>
  <div>
    <button @click="addItem">添加项目</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }} <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const items = ref([]); // 使用ref来管理数组

    function addItem() {
      items.value.push('新项'); // 使用.value属性来访问并操作数组
    }

    function removeItem(index) {
      items.value.splice(index, 1);
    }

    return { items, addItem, removeItem };
  },
};
</script>

在这个例子中，`items`是一个响应式数组，当其值发生变化（如添加、删除元素），页面会自动更新。当你点击“添加项目”按钮时，会往数组末尾追加新的元素；点击“删除”按钮时，对应的元素会被移除。