Vue3中ref数组如何实现Vue2排除指定元素的等价操作？

在Vue3中，tasks是通过ref声明的响应式数组，我们需要通过.value访问实际的数组实例，后续操作逻辑和Vue2完全一致：

// 过滤掉id为1的元素并更新响应式数组
tasks.value = tasks.value.filter(task => task.id !== 1)

这段代码会直接修改原响应式数组，过滤掉所有id等于1的元素，Vue3会自动触发视图更新，和你在Vue2中实现的效果完全等价。

如果希望保留原数组的完整数据，仅在视图中渲染过滤后的结果，可以使用computed计算属性：

import { ref, computed } from 'vue'

const tasks = ref([/* 你的初始数组数据 */])
// 声明计算属性，返回过滤后的数组
const filteredTasks = computed(() => tasks.value.filter(task => task.id !== 1))

之后在模板中直接使用filteredTasks即可，这种方式不会修改原数组，适合需要保留原始数据的场景。

内容的提问来源于stack exchange，提问作者joebob