在前端开发中，我们经常需要监听对象或者数组的变化，以便在数据发生变化时及时做出相应的响应。在 JavaScript 中，使用 ES6 中的 Proxy 可以实现这个功能，但使用起来比较复杂，需要对 Proxy 稍有一些了解。为了让更多的开发者能够方便地监听对象或数组的变化，npm 社区中出现了一个名为 "observed" 的库，它可以帮助我们轻松地实现对象或者数组的监听。
安装 observed
首先，我们需要使用 npm 安装 observed：
npm i observed使用 observed
使用 observed 非常简单。我们需要使用 observed 函数创建一个实例来监听对象或数组的变化。
-- -------------------- ---- ------- ----- -------- - -------------------- ----- --- - - -- -- -- -- -- - -- - - -- ----- ----------- - -------------- ------------------------ --------- -- - --------------------- -- ------- --------- ----- ---- --------- --- --- ----- - --展开代码
在上面的示例中，我们创建了一个包含三个属性的对象 obj，并使用 observed 函数创建了一个实例 objObserved，来监听 obj 的变化。实例 objObserved 是一个 EventEmitter 对象，当 obj 的属性发生变化时，objObserved 会将变化数据（changes）作为参数触发一个 change 事件，我们可以在 change 事件的回调函数中处理变化数据。在 obj.a 的赋值操作之后，objObserved 就会触发 change 事件，我们可以打印变化数据来查看变化的类型、名称以及新的值。
observed 不仅可以监听对象，还可以监听数组。我们同样可以通过对象的 on 方法来监听数组的变化。
const array = [1, 2, 3]; const arrayObserved = observed(array); arrayObserved.on('change', (changes) => { console.log(changes); // [{type: 'splice', index: 1, addedCount: 1, removed: []}] }); array.push(4);
在上面的示例中，我们创建了一个包含三个元素的数组 array，并使用 observed 函数创建了一个实例 arrayObserved，来监听 array 的变化。在 array.push(4) 的操作之后，arrayObserved 就会触发 change 事件，我们可以打印变化数据来查看变化的类型、下标以及增加或者删除的元素。
结语
本文介绍了如何使用 npm 包 observed 来监听对象或者数组的变化，同时展示了 observed 的基本用法。observed 是一个非常方便的工具，在实际的项目中可以帮助我们更好地监听数据，从而更好地实现项目需求。如果读者对 observed 感兴趣，可以参考官方文档 https://github.com/molnarg/observed，了解更多的用法和功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74032
