什么是 Weakable
Weakable 是一个基于 Proxy 的工具库，它可以帮助你监控对象的属性变化并进行响应。相比于其他类似工具，Weakable 使用的是 WeakMap 来缓存对于对象属性的引用，因此可以避免内存泄漏。
安装和引入
使用 npm 安装：
npm install weakable
在需要使用的文件中引入：
const Weakable = require("weakable");或者使用 ES6 模块导入：
import Weakable from "weakable";
使用示例
下面我们通过一个示例来了解如何使用 Weakable。
首先我们需要创建一个需要监控的对象：
const obj = { name: "张三", age: 18 };然后我们可以使用 Weakable 对象来监控对象的属性变化：
const weakable = new Weakable({
onChange(target, key, oldValue, newValue) {
console.log(`属性 ${key} 值从 ${oldValue} 变成了 ${newValue}`);
},
});
const monitoredObj = weakable.monitor(obj);在上面的代码中，我们创建了一个 Weakable 实例，并通过 monitor 方法来监控了 obj 对象。同时我们传入了一个 onChange 回调函数，该函数会在 obj 对象的属性变化时被触发。
现在，我们对 obj 对象的属性进行修改：
monitoredObj.name = "李四"; monitoredObj.age = 20;
在控制台输出的结果为：
属性 name 值从 张三 变成了 李四 属性 age 值从 18 变成了 20
我们看到，当 obj 对象的属性值被修改时，onChange 回调函数被触发，并输出了属性变化的信息。
注意：如果我们使用的是对象字面量来创建我们需要监控的对象，我们需要在创建时指定 __proto__ 属性，以此来避免将属性添加到 Object.prototype 中。
const obj = { name: "张三", age: 18, __proto__: null };更多高级用法
除了监控整个对象的属性变化外，Weakable 还支持监控对象的单个属性变化，这时我们需要使用 watch 方法。该方法需要传入两个参数：被监控的对象和需要监控的属性名。同时，如果要停止监控某个属性，可以调用 unwatch 方法。
下面是一个示例：
-- -------------------- ---- -------
----- --- - - ----- ----- ---- --- ---------- ---- --
----- -------- - --- ----------
---------------- ---- --------- --------- -
--------------- ------ -- ----------- --- --------------
--
---
----- ------------ - ----------------------
---------------------------- ------- ---------- --------- -- -
--------------- ---- -- ----------- --- --------------
---
----------------- - -----
---------------- - ---
-- --------
------------------------------ --------
----------------- - -----以上代码中，我们首先创建了一个被监控的对象 obj。然后创建了一个 Weakable 实例并使用 monitor 方法来监控 obj 对象。然后我们使用 watch 方法来监控了 obj 对象的 name 属性，当 name 属性的值变化时，会触发回调函数并输出变化的信息。
最后我们使用 unwatch 方法取消了对于 name 属性的监控。
总结
通过本文我们了解了如何使用 npm 包 Weakable 来监控对象属性的变化。我们展示了监控整个对象属性变化和单个属性的变化的用法，并提供了示例代码进行演示。
Weakable 库在前端应用的开发过程中，尤其是在状态管理方面，会有非常重要的作用，希望读者在实践过程中能够熟练使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005681181e8991b448e4321