前言
can-compute 是一个非常有用的 npm 包，它能够为我们提供一种更优雅的方式来处理数据的变化，同时减少我们对 DOM 的操作。
什么是 can-compute
can-compute 是一个 JavaScript 库，它提供了一种计算属性的方式，可以根据依赖项自动更新数据，这一点类似于 Vue 中的 computed 属性。can-compute 也支持深度观察对象和数组的变化。
can-compute 可以使我们的代码更可读、更可维护，减少了代码中出现的大量冗余代码。
can-compute 的使用
安装
你可以通过 npm 安装 can-compute（或者使用 yarn）
npm install can-compute
创建计算属性
下面我们通过一个例子来创建一个计算属性，假设我们有一个配置选项让用户选择要显示的语言（en 或者 zh-cn），同时我们有一个语言包（lang）：
-- -------------------- ---- ------- ------ ------- ---- ------------- ----- ---- - - --- - --------- --- ---- -- -------- - --------- ------ - - ----- -------- - ------------- ----- ----- - ---------- -- - ------ ---------------- -- ------------------------- -- -------------------- -- -- ---展开代码
在上面的代码中，我们调用了两次 compute 函数：第一次用于创建一个计算属性 userLang，并传入一个默认值；第二次用于创建一个计算属性 title，我们使用了一个函数返回一个表达式的值，这个表达式使用了 userLang 的值来动态地从 lang 对象中获取对应语言的 appTitle 属性。最后，我们调用了 title 属性的 getter 方法来获取它的值，这里 expect 输出的值是 My App。
监听对象的变化
can-compute 也可以帮助我们监听对象的变化。下面是一个示例代码，我们可以监听对象中某个属性的变化，当属性变化时会重新计算计算属性：
-- -------------------- ---- ------- ------ ------- ---- ------------- ----- --- - - ----- ----- ---- -- - ----- ----------- - ------------ ------- ----- ---------- - ------------ ------ ------------------------ -- -- - ----------------- --------- -- ----------------------- -- -- - ---------------- --------- -- -------- - ---- -- ---- ------- ------- - -- -- --- -------展开代码
在上面的代码中，我们先创建了一个包含 name 和 age 属性的对象 obj，然后分别监听了 name 和 age 属性，当属性变化时会触发对应的 change 事件。
监听数组的变化
can-compute 也支持监听数组的变化，包括 push、pop、shift、unshift、remove 等操作。下面是一个示例代码：
-- -------------------- ---- ------- ------ ------- ---- ------------- ----- ---- - ----------- -- --- ----------------- -- -- - ----------------- ------ ---------- -------------- -- -------------- ---- ------ ------ -- - ------------------ -------- ------ --- -------- ------ -- ----------------- ---- ------ ------ -- - ------------------ ---------- ------ --- -------- ------ -- ------------ -- ----- ------ --- -- ------ - -- ---- ------ -------- - ------------ -- ----- -------- --- -- ------ - -- ---- ------ -------- -展开代码
在上面的代码中，我们创建了一个包含三个元素的数组 list，并监听了它的 push、pop、shift、unshift、remove 等操作，当数组长度发生变化时会触发 length 事件，当添加元素时会触发 add 事件，当删除元素时会触发 remove 事件。在我们分别调用 push 和 shift 方法之后，数组中添加一个元素和删除一个元素，同时触发了对应事件，打印出了 expected 信息。
结语
本文介绍了 can-compute 的使用方法，包括创建计算属性、监听对象和数组的变化等。希望这篇文章对大家能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75708
