概述
vue-custom-decorators 是一个基于 Vue.js 的装饰器库，提供了一些常用的装饰器用于编写 Vue 组件，能够帮助我们更加优雅地组织代码和提高开发效率。
安装
要使用 vue-custom-decorators，我们需要先安装它：
npm install vue-custom-decorators --save
使用方法
注册组件
使用 vue-custom-decorators，我们可以通过装饰器来注册组件。以下是一个简单的示例：
import { Component, Vue } from 'vue-custom-decorators'
@Component
export default class MyComponent extends Vue {
// ...
}上面的代码中，我们使用 Component 装饰器来注册组件，并将其应用在 MyComponent 类上。
添加 props
在 Vue 中，我们可以通过 props 属性来定义组件的 props，然后在组件中使用它们。使用 vue-custom-decorators，我们可以通过 Prop 装饰器来定义 props，并将其应用在组件的属性上。以下是一个示例：
import { Component, Prop, Vue } from 'vue-custom-decorators'
@Component
export default class MyComponent extends Vue {
@Prop({ type: String })
message!: string
}上面的代码中，我们使用 Prop 装饰器来定义一个名为 message 的 prop。
添加计算属性
在 Vue 中，我们可以通过 computed 属性来定义计算属性。使用 vue-custom-decorators，我们可以通过 Computed 装饰器来定义计算属性:
-- -------------------- ---- -------
------ - --------- ---------- --- - ---- -----------------------
----------
------ ------- ----- ----------- ------- --- -
------- - -------
---------
--- ----------------- -
------ -----------------------------------------
-
-上面的代码中，我们使用 Computed 装饰器来定义一个名为 reversedMessage 的计算属性。
添加事件监听器
在 Vue 中，我们可以通过 v-on 指令来添加事件监听器。使用 vue-custom-decorators，我们可以通过 Watch 装饰器来定义事件监听器：
-- -------------------- ---- -------
------ - ---------- ---- ----- - ---- -----------------------
----------
------ ------- ----- ----------- ------- --- -
------- - -------
-----------------
-------------------------- ------- --------- ------- -
-- ---
-
-上面的代码中，我们使用 Watch 装饰器来定义一个名为 onMessageChanged 的事件监听器。
总结
使用 vue-custom-decorators，我们可以通过装饰器更加方便地编写 Vue 组件。这使得我们能够更加优雅地组织代码和提高开发效率。
示例代码
以下是一个完整的示例代码，展示了如何使用 vue-custom-decorators 编写一个简单的 Vue 组件：
-- -------------------- ---- -------
------ - --------- ---------- ----- ---- ----- - ---- -----------------------
----------
------ ------- ----- ----------- ------- --- -
------- ----- ------ --
--------- ------
------------- - -
---------
--- ----------------- -
------ -----------------------------------------
-
-----------------
-------------------------- ------- --------- ------- -
------------------ - ---------------
-
--------- -
------------------------ ---------
-
-------- -
------ -
-----
---------------------
-----------------------------
---------------------------
------
-
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005642481e8991b448e151f