简介
随着 Vue 项目的复杂度越来越高，业务逻辑也变得越来越复杂，Vue 组件的编写也变得越来越困难。此时，@gongzza/vue-property-decorator 包的出现为 Vue 组件的编写带来了不少便利。
@gongzza/vue-property-decorator 是一个 Vue 的装饰器库。它为 Vue 开发者提供了一套可复用的、基于 TypeScript 的装饰器（decorator）和 mixins，可以大大简化 Vue 组件中的代码和开发效率。
安装和配置
首先，我们需要在项目中安装 @gongzza/vue-property-decorator 包。安装方式如下：
npm install --save @gongzza/vue-property-decorator
在 Vue 2.x 版本中，我们需要使用 Vue.extend() 方法同时在组件中引用 @gongzza/vue-property-decorator:
-- -------------------- ---- ------- -- -- --- -- ------ --- ---- ----- ------ --------- ---- --------------------- -- -- ------------------------------- ---- ------ - ----- ------ ---- - ---- --------------------------------- -- ---- ---------- ------ ------- ----- ----------- ------- --- - -- --------- -
在 Vue 3.x 版本中，我们可以将代码简化为如下形式：
-- -------------------- ---- ------- -- -- ------------------------------- ---- ------ - ---------------- ----- ------ ---- - ---- --------------------------------- -- ---- ------ ------- ----------------- ----------- --- ------ --- ------- --- --
常用的装饰器
@Prop
用于声明组件的 props 属性。相较于 Vue 的原生写法，@Prop 装饰器可以简化代码，并且让我们在使用 props 属性时能够更好的结构化。
-- -------------------- ---- ------- ------ - ---- - ---- --------------------------------- ---------- ------ ------- ----- ----------- ------- --- - ------------- ----- ------- -
上面代码定义了一个 props 属性 msg，并指定了数据类型为 String。
@Watch
用于监听一个变量或者一个表达式的变化，并在变化时执行一些操作。相较于 Vue 的原生 watch，@Watch 装饰器可以让我们在实现业务逻辑时，更好的结构化。
-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------
----------
------ ------- ----- ----------- ------- --- -
-------------
----- -------
-------------
-------------------- ------- ------- ------- -
------------------ ------- ---- ----------- -- --------------
-
-上面代码实现了监听 msg 变量的变化，并在变化时输出信息。
@Emit
用于在子组件中调用父组件的方法，并触发父组件的事件。相较于 Vue 的原生 $emit，@Emit 装饰器可以让我们更好地结构化代码。
-- -------------------- ---- -------
------ - ---- - ---- ---------------------------------
----------
------ ------- ----- ----------- ------- --- -
-------------
----- -------
------------
------- -
----------------- --------- ---
-
-上面代码将 onAdd 方法加上 @Emit 装饰器，并指定要触发的事件为“add”事件。
总结
@gongzza/vue-property-decorator 包可以为我们优化 Vue 组件开发所需要的代码，同时也使得我们的 Vue 组件更加具有可读性和可维护性。使用 @gongzza/vue-property-decorator 包，能够让前端工程师更加专注于业务逻辑的实现，而非 Vue 组件编写。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5981e8991b448e5dbb