Vue 中使用 array.filter() 删除元素时未生效，是因为该方法返回新数组而非原地修改，需将返回值重新赋给原变量，否则响应式数据不会更新。
vue 中使用 `array.filter()` 删除元素时未生效，是因为该方法返回新数组而非原地修改，需将返回值重新赋给原变量，否则响应式数据不会更新。
在 Vue 应用中，Array.prototype.filter() 是一个纯函数：它不会改变原始数组，而是返回一个满足条件的新数组。因此，当你在 addDish 方法中仅调用 this.dishes.filter(...) 而未将其结果重新赋值给 this.dishes 时，原始数组保持不变，Vue 的响应式系统也无法检测到变化，导致界面状态（如背景色）无法回退。
以下是修正后的 App.vue 关键代码段：
<script>
export default {
data() {
return {
dishes: []
}
},
methods: {
addDish(dish) {
if (this.dishes.includes(dish)) {
// ✅ 正确：将 filter 返回的新数组重新赋值给 this.dishes
this.dishes = this.dishes.filter(d => d !== dish)
} else {
this.dishes.push(dish)
}
}
}
}
</script>
⚠️ 注意事项：
-
filter()不会触发 Vue 的响应式更新，除非你显式赋值（如this.dishes = ...）； - 使用
includes()判断字符串是否在数组中是安全的（本例中dish为字符串），但若未来升级为对象数组，请改用some()+ 比较唯一字段（如id），避免引用相等性陷阱； - 若需频繁增删，也可考虑使用
splice()配合indexOf()实现原地修改（同样需赋值触发响应式）：
const index = this.dishes.indexOf(dish)
if (index > -1) {
this.dishes.splice(index, 1) // 原地删除，Vue 可检测
}
✅ 总结：在 Vue 中操作响应式数组时，任何非变异方法（如 filter、map、slice）都必须显式重新赋值，才能确保视图同步更新。这是理解 Vue 响应式原理与 JavaScript 数组行为的关键交汇点。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
