在Vue开发过程中，我们经常需要使用一些lifecycle hooks、computed属性和watch监听器等等，但这些功能的代码都散落在组件的各个部分中，使得代码难以维护。
使用ahp-vue-decorator，我们可以将这些功能封装到装饰器中，大大提高了代码的可读性、可维护性和可扩展性。
ahp-vue-decorator
ahp-vue-decorator是一个npm包，它提供了一系列的装饰器用于Vue组件的开发。
在使用ahp-vue-decorator之前，需要先安装ahp-vue-decorator包。
npm install ahp-vue-decorator --save
生命钩子Hooks
在ahp-vue-decorator中，生命周期钩子可以通过装饰器实现。比如你想在created周期中打印组件的名称可以这样：
-- -------------------- ---- -------
----------
------------------
-----------
--------
------ ----- ---------- ----- ---- --------------------
----------
----- ----------- ------- --- -
----- - --------------------
----------------
----------- -
----------------------- --------------------- -- ----------
-
-
---------上面代码中，我们使用了Hook装饰器声明了onCreated方法，然后将其标记为created生命钩子的回调函数。
计算属性Computed
ahp-vue-decorator也提供了装饰器来帮助我们使用计算属性。比如下面的组件，实现了对数组中的所有元素的求和：
-- -------------------- ---- -------
----------
------------------
-----------
--------
------ ----- ---------- --------- ---- --------------------
----------
----- ----------- ------- --- -
---- - --- -- -- -- ---
---------
--- ----- -
------ ----------------------- ----- -- ---- - ----- ---
-
-
---------上面代码中，我们通过Computed装饰器声明了sum计算属性，并使用get方法返回了该属性的值。
监听属性Watch
ahp-vue-decorator也提供了装饰器来帮助我们使用监听器。比如下面的组件，监听了message属性的变化：
-- -------------------- ---- -------
----------
----------------------
-----------
--------
------ ----- ---------- ------ ---- --------------------
----------
----- ----------- ------- --- -
------- - ------ --------
-----------------
-------------------------- --------- -
---------------------- ------- -------- ----------- -- --------------
-
-
---------上面代码中，我们使用Watch装饰器声明了onMessageChanged方法，并将其标记为message属性的监听器。可以看到，当message的值发生变化时会触发该监听器。
总结
ahp-vue-decorator提供了一系列的装饰器，可以大大提高我们在Vue项目中的开发效率。上面的示例只是其中的一小部分，更多的功能请查看ahp-vue-decorator的官方文档。
参考资料：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601181e8991b448de01b