概述
Mobx 是 JavaScript 应用程序的状态管理库，而 mobx-deep-observer 是一个极为实用的 Mobx 扩展库，它可以一步到位地解决 Mobx 观察深层嵌套数据的问题，让 Mobx 所管理的数据更加灵活，方便快捷。
在本文中，我们将介绍安装与使用 mobx-deep-observer 以及给出示例代码，通过本文的学习，你将深入了解 mobx-deep-observer 的实现原理和使用技巧，掌握使用 mobx-deep-observer 提高开发效率、简化代码的能力。
安装
安装 mobx-deep-observer 非常简单，只需要在终端输入以下命令即可：
npm install mobx-deep-observer --save
使用
在使用 mobx-deep-observer 之前，需要我们先熟悉 Mobx 的基础使用。
Mobx 基础使用
Mobx 主要包含三个概念：observable、action 和 computed。
observable 可以将一个普通的 JavaScript 值转换为可观察数据，以便在数据变化时可以通知相关的组件更新。
import {observable} from 'mobx';
const store = observable({
count: 1
})
store.count = 2 // 数据变化，触发组件更新action 用于修改 observable 数据，只有通过 action 方法改变 observable 数据，组件才会重新渲染。
-- -------------------- ---- -------
------ ------------ ------- ---- -------
----- ----- - ------------
------ --
---------- ----------------- -
----------- -- -
--
--
-----------------computed 则是一个带有缓存的方法，它通过其他 observable 或 computed 的值计算出结果，只有值发生变化时，才会重新计算。
-- -------------------- ---- -------
------ ------------ --------- ---- -------
----- ----- - ------------
------ --
------- ------------------- -
------ ----------- - -
--
--
------------------------- -- -
----------- - -
------------------------- -- -Mobx-deep-observer 的使用方法
Mobx-deep-observer 提供了一个 DeepObserver API，它可以观察多个层级的数据变化，让 Mobx 更加灵活。
来看一下一个使用 Mobx 观察多个层级数据变化的例子：
-- -------------------- ---- -------
------ ------------ ---- -------
----- ----- - ------------
----- -----
---- ---
-------- -
--------- ------
----- ------
--------- -----
-
--
-- ------ ------- ---------
----- -------- - ---------- -- -
--------------------------------------------------------------------------------------------
---
---------------------- - ------
-- --------------------
-----------使用 mobx-deep-observer 来观察多个层级数据变化，只需要将 autorun 方法替换成 DeepObserver 方法即可。
-- -------------------- ---- -------
------ ------------ ---- -------
------ ------------ ---- ---------------------
----- ----- - ------------
----- -----
---- ---
-------- -
--------- ------
----- ------
--------- -----
-
--
-- ---- ------- ---------
----- -------- - --------------- -- -
--------------------------------------------------------------------------------------------
---
---------------------- - ------
-- --------------------
-----------代码中，只需要将 autorun 方法替换成 DeepObserver 方法即可实现观察整个 address 对象内部数据变化。这个例子只是通过观察一个多层级的对象，让读者初步了解 mobx-deep-observer 的使用方法。
总结
在本文中，我们详细介绍了 mobx-deep-observer 的安装与使用方法，并通过示例代码帮助读者学习使用 mobx-deep-observer 来简化代码，提高开发效率。除了上面的示例代码，还有许多复杂场景下的应用，读者可以在实际业务场景中灵活运用，提高开发效率，让 Mobx 所管理的数据更加灵活，方便快捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671081e8991b448e351f