什么是 observable-object？
observable-object 是一个 npm 包，它是一个轻量级的 JavaScript 库，它提供了一种简单的方式来创建可观察的对象。它可以让你轻松地监听你的对象并在属性值改变时执行回调函数。
通过使用 observable-object，你可以简单地将对象属性绑定到 HTML 文档的 DOM 元素之间，而无需编写繁琐的代码和手动更新 DOM 元素值。
安装
你可以使用 npm 在你的项目中安装 observable-object：
npm install observable-object
使用
创建一个 observable 对象
要创建一个 observable 对象，需要在代码中导入 observable-object，然后使用 observable() 函数来创建一个新的对象：
import { observable } from 'observable-object';
const person = observable({
firstName: 'John',
lastName: 'Doe',
age: 30,
});在这个例子中，我们创建了一个叫做 person 的对象，并且将其属性 firstName，lastName 和 age 设置为相应值。
监听对象属性的变化
一旦你创建了一个 observable 对象，就可以监听它的属性变化。这可以通过使用 watch() 函数来实现。
在下面的示例中，我们将使用 watch() 函数来监听 person 对象中 age 属性的变化：
-- -------------------- ---- ------- ------ - ---------- - ---- -------------------- ----- ------ - ------------ ---------- ------- --------- ------ ---- --- --- ------------------- ---------- --------- -- - ------------------- --- ------- ---- ----------- -- -------------- ---
当 age 属性的值更改时，我们将记录一个消息到控制台中。
更新对象的属性
要更改 observable 对象中的属性值，只需要像普通 JavaScript 对象一样重新赋值即可。observable-object 会为你自动完成通知回调函数的操作。
-- -------------------- ---- ------- ------ - ---------- - ---- -------------------- ----- ------ - ------------ ---------- ------- --------- ------ ---- --- --- ---------- - ---
在这个例子中，我们将更新 person 对象的 age 属性的值为 31。根据之前的示例，这将触发回调函数并记录消息到控制台中。
总结
observable-object 可以让我们轻松地监听 JavaScript 对象的属性变化，并进行相应的操作。它是一个非常有用的工具，可以帮助我们避免繁琐的代码，并更具交互性与动态性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9d3d1de16d83a66ffd