深入剖析：为何 lodash 的 remove 在 Vue.js 中并非响应式

2023-09-08 01:09:36

lodash，一个功能强大的 JavaScript 库，以其丰富的实用程序和对原生 JavaScript 对象的扩展而闻名。然而，当与 Vue.js 等响应式框架结合使用时，lodash 的某些方法的行为可能会令人惊讶，尤其是 remove。

在 Vue.js 中，数据响应性是核心概念。通过利用 Vue.js 的响应式系统，开发者可以轻松地监听数据更改，并自动更新受影响的视图。然而，在某些情况下，使用 lodash 的 remove 方法可能会破坏响应性，导致视图中无法反映数据的变化。

要理解这种情况，我们首先需要了解 Vue.js 响应性的工作原理。Vue.js 使用代理对象来包装数据对象。当代理对象的属性发生变化时，Vue.js 会检测到这些变化并触发更新。但是，如果直接操作原始数据对象（即绕过 Vue.js 的响应式系统），则 Vue.js 无法检测到这些更改，也不会触发更新。

lodash 的 remove 方法会直接修改数组，而不会返回新数组。这意味着，如果我们在 Vue.js 中使用 remove 方法来从响应式数组中删除元素，Vue.js 不会检测到数组发生更改，也不会更新视图。

为了解决这个问题，我们可以使用 Vue.js 提供的 set 方法来显式通知 Vue.js 数组发生了更改。set 方法接受一个数组，一个索引和一个值，并会触发 Vue.js 响应式系统。

例如：

const todos = Vue.observable([
  { id: 1, title: 'Task 1' },
  { id: 2, title: 'Task 2' },
]);

// 直接使用 lodash remove 不会触发响应性
lodash.remove(todos, (todo) => todo.id === 1);

// 使用 Vue.js $set 方法触发响应性
Vue.set(todos, 0, { id: 1, title: 'Updated Task 1' });