delete playList vue3 页面没更新

在Vue 3中，当你调用`delete`操作符删除数组中的某个元素时，页面可能不会立即更新，因为 Vue 的响应式系统依赖于 `data` 对象的变化检测。为了解决这个问题，你需要手动触发一次视图更新，通常通过 `this.$set` 或 `ref.value` 来完成。

例如，假设你有一个`playList`数组存储在组件的数据里，并且用`v-for`渲染，可以这样做：

<template>
  <ul>
    <li v-for="item in playlist" :key="item.id">
      {{ item.title }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      playlist: ref([]),
    };
  },
  methods: {
    deleteItem(id) {
      this.$set(this.playlist, this.playlist.findIndex((item) => item.id === id), undefined);
    },
  },
};
</script>

当你调用`deleteItem`方法并传入元素的 ID 时，`$set`会告诉 Vue 数据已发生变化，促使页面刷新展示修改后的列表。

如果直接删除数组元素导致视图未更新，可以尝试：

this.playlist.splice(findIndex, 1);
this.$forceUpdate();

但推荐使用`$set`因为它更高效、更安全。