前言
作为一个前端开发者，我们不光要掌握各种框架和库的使用，更需要学会如何使用 npm 包。npm（Node Package Manager）是 Node.js 的包管理器，可以方便地安装、管理和发布 Node.js 模块。
在 Vue 中，我们经常需要监听数据变化并执行相应操作。但是，Vue 的数据响应式并不是完全的，有一些场景需要手动触发更新视图。vue-modified 包就是为解决这个问题而生的。
安装 Vue-modified
npm 安装：
npm install vue-modified
使用 Vue-modified
在使用 Vue-modified 之前，我们需要在 Vue 中引入该组件：
import VueModified from 'vue-modified' Vue.use(VueModified)
引入后，我们就可以在模板中使用「v-modified」指令，与「v-model」指令类似。下面是一个使用例子：
-- -------------------- ---- -------
----------
-----
------ ----------------- ------------
------- ---------------------------------
------
-----------
--------
------ ------- -
---- -- -
------ -
----- --------------
-
--
-------- -
------ -- -
--------------------------- -- ---- -- -----
---------------------- -- ------------
-
-
-
---------在该例子中，我们使用了 v-modified 指令来绑定一个输入框的值，并在点击按钮时输出该数据是否被修改以及当前数据的值。
Vue-modified 源码分析
Vue-modified 最核心的代码其实并不多，下面是源码的部分截取：
-- -------------------- ---- -------
-------- ---------- ---- -
----- ----- - ------------
-- --------------- --- ------ ------ -----
-- ------------- ------ ----
------ -----------------------------
-- ----------------------------
-- -------------------------------
-
-------- -------- ---- -
-- -------------------- -
----------------- - -
------- ------ -- --- ---------- - ---------- - ------------
--------- ------
---------- ----
-
-
------ -----------------
-
------ ------- -
---- ---- -------- ------ -
--- -------- - ----------- -- ------------------
--- ----- - -----------------------
--- --------- - -----------------
--- ----- - -----------------------
--------------- - ---------
---------------------- - --
-------------- - -----
---------------------------- -- -- -
----- - -----------------------
-------------- - ----
----- ---------------------- -- -------------------------------- -
----- - ----------------------------
-
-- --------------------------- -- ------------------------ -
-------------------------- -- -
--- ------ - ----------------------------------------
--- ------- - ------------------------------ -- -
--- ----- - ------------------------------
------ --------------- --- ---------
- -------------- --- -----
- ----
--
-- --------- -
-------------- - -----
-
--
-
--
--
------ ---- -------- ------ -
------ ---------------------------------------------
--
------- ----- -
------------------------- -----
-
-从中可以看出，Vue-modified 最核心的功能就是在输入框的输入事件中，给元素绑定一个 modified 属性，并在数据被修改时将该属性设置为 true。而在该指令所绑定的元素所在的表单提交事件中，可通过验证所有具有该指令的元素的 modified 属性是否都为 false，以判断表单中的数据是否有被修改的。
总结
在开发 Vue 应用时，vue-modified 包可以帮助我们更轻松地监听数据变化，并能快速捕捉到表单数据的变更。除此之外，对于更高级的需求，我们也可以基于 vue-modified 包进行扩展。
在npm包的使用过程中，我们一方面需要熟悉官方文档的使用方法，另一方面考虑如何将这些包与自身的项目相结合，让其能够更好地服务于项目的实际需要。因此，我们在使用 npm 包时，也需要不断地学习和探索，才能更好地进行项目开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f89238a385564ab6d89