vue3 删除数组的元素 页面不会更新

在Vue 3中，当直接使用数组的`delete`方法删除元素时，Vue的响应式系统默认并不会立即更新视图，因为`delete`操作不被视为对数据的“常规”更改。为了强制页面更新，你可以采用几种策略：

1. **使用`$delete`或`$remove`**：Vue官方提供了一个叫做`$delete`的方法，它是专门用于从响应式数组中删除元素的，这将触发视图的更新。示例：

   this.$delete(this.arrayName, targetValue);

2. **`$set`方法**：在数组的索引位置设置为`undefined`，然后Vue会认为数组已经发生了变化：

   this.$set(this.arrayName, index, undefined);

3. **`splice`替换**：用新的值替换要删除的位置，然后数组会被视为已更新：

   this.arrayName.splice(index, 1);

但是请注意，`splice`会改变数组的长度，所以最好配合`$forceUpdate`来确保视图更新：

   this.arrayName.splice(index, 1);
   this.$forceUpdate();

4. **使用`ref`的`.value`属性**：
如果你在`data`中声明了引用类型的数组，如`ref`，可以直接操作其内部数组：

   const arrayRef = ref([]);
   // 删除元素
   arrayRef.value.splice(index, 1);

总之，要确保数组的变化被Vue监听到，需要适当的操作配合Vue提供的更新机制。