vue3中数据修改了，视图未及时更新的解决办法

需求

• 需要定义方法删除数组对象的某一项

    let todoItems = reactive([
      { task: "看电影", id: 1 },
      { task: "打游戏", id: 2 },
      { task: "吃饭", id: 3 },
    ]);

错误做法

function deleteTodoItem(item) {
  todoItems = todoItems.filter((todoItem) => todoItem.id !== item.id);
}

但是，使用filter方法过滤数据重新赋值后，数据修改了，视图却没有更新，这和vue3的更新机制有关。

例子说明：

let todoItems = [
  { task: "看电影", id: 1 },
  { task: "打游戏", id: 2 },
  { task: "吃饭", id: 3 },
];

function deleteTodoItem(item) {
  todoItems = todoItems.filter((todoItem) => todoItem.id !== item.id);
  console.log(todoItems);
}

deleteTodoItem({ task: "吃饭", id: 3 });
//输出 [ { task: '看电影', id: 1 }, { task: '打游戏', id: 2 } ]

正确做法

接下来，换个思路，换成splice方法，改变原数组。

具体用法：Array.prototype.splice()

此次的需求是删除其中一个元素，故基本语法如下：

Arr.splice(index,1)

所以需要找到该对象元素在数组的索引

方法1：indexOf()

let todoItems = [
  { task: "看电影", id: 1 },
  { task: "打游戏", id: 2 },
  { task: "吃饭", id: 3 },
];

function deleteTodoItem(item) {
  const findItem = todoItems.filter((todoItem) => todoItem.id === item.id);
  console.log(findItem); //输出 [ { task: '吃饭', id: 3 } ]
  console.log(todoItems.indexOf(findItem[0])); //输出2
  //删除
  todoItems.splice(todoItems.indexOf(findItem[0]), 1);
  console.log(todoItems); //输出 [ { task: '看电影', id: 1 }, { task: '打游戏', id: 2 } ]
}

deleteTodoItem({ task: "吃饭", id: 3 });

方法2：findIndex()

let todoItems = [
  { task: "看电影", id: 1 },
  { task: "打游戏", id: 2 },
  { task: "吃饭", id: 3 },
];

function deleteTodoItem(item) {
  const findItemIndex = todoItems.findIndex(
    (todoItem) => todoItem.id === item.id
  );
  todoItems.splice(findItemIndex, 1);
  console.log(todoItems); //输出 [ { task: '看电影', id: 1 }, { task: '打游戏', id: 2 } ]
}

deleteTodoItem({ task: "吃饭", id: 3 });

结语

问题完美地解决了~