Vue3 ref数组对象更新不及时一种解决办法

<template>
  <div>
    <div v-for="(item, index) in list" :key="item.id">
      <input v-model="item.name" />
      <button @click="removeItem(index)">Remove</button>
    </div>
    <button @click="addItem">Add Item</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const list = ref([]);
 
    function addItem() {
      list.value.push({ id: list.value.length, name: '' });
    }
 
    function removeItem(index) {
      list.value.splice(index, 1);
    }
 
    return {
      list,
      addItem,
      removeItem
    };
  }
};
</script>

这个代码实例展示了如何在Vue 3中使用ref来创建响应式数组，并展示了如何添加和删除数组中的元素。它还演示了如何使用v-for指令来循环渲染数组中的每个元素，并使用v-model来实现双向数据绑定。这个例子是一个简单的列表编辑界面，并且展示了如何处理用户的添加和删除操作。