前言
Vue.js 是一款轻量级的 MVVM 框架，封装了复杂的 DOM 操作，让我们可以更专注于应用的业务逻辑。随着 Vue.js 的快速发展，越来越多的开发者开始使用 Vue.js 开发前端应用。而在实际应用中，我们经常需要用到一些装饰器来简化代码，增加可复用性。这时，就可以使用 npm 包 vue-decorators。
vue-decorators 简介
vue-decorators 是一个针对 Vue.js 的装饰器库，通过使用类似装饰器的方式，可以更方便地实现 Vue.js 的一些高级功能。它提供了丰富的装饰器组合方式，可以大大减少代码冗余，提高我们的开发效率。
安装 vue-decorators
npm 包 vue-decorators 的安装非常简单，只需要在命令行中执行以下命令即可：
npm install --save vue-decorators
vue-decorators 的使用
vue-decorators 提供了很多装饰器，每个装饰器的作用都不同。下面，我们将介绍一些常用的装饰器及其使用方法。
@Prop
@Prop 装饰器可以用来声明一个父组件传递过来的属性。使用 @Prop 装饰器后，我们就可以通过 this.xxx 引用到父组件传递过来的属性了。
import { Component, Prop, Vue } from 'vue-decorators';
@Component
class MyComponent extends Vue {
@Prop
message: string;
}@Watch
@Watch 装饰器可以用来监视一个组件中的变量或表达式的值。如果监视的值发生变化，就会触发对应的回调函数。使用 @Watch 装饰器后，我们就可以轻松实现组件中的状态管理。
-- -------------------- ---- -------
------ - ---------- ------ --- - ---- -----------------
----------
----- ----------- ------- --- -
------- - ---
-----------------
----------------------- ------- ------- ------- -
-------------------- ------- ---- --------- -- ------------
-
-@Computed
@Computed 装饰器可以用来声明一个计算属性。使用 @Computed 装饰器后，我们可以根据其他组件的数据计算出一个新的值，并在视图中展示出来。
-- -------------------- ---- -------
------ - ---------- --------- --- - ---- -----------------
----------
----- ----------- ------- --- -
--------- - -------
-------- - ------
---------
--- ---------- -
------ ------------------ ------------------
-
-@Emit
@Emit 装饰器可以用来声明一个自定义事件。使用 @Emit 装饰器后，我们可以将一个组件内的事件传递给父组件。
-- -------------------- ---- -------
------ - ---------- ----- --- - ---- -----------------
----------
----- ----------- ------- --- -
------- - ---
---------- -
-------------------- --------------
-
-----
---------- --
-这里的 @Emit 装饰器可以让 onCancel 方法触发一个名叫 cancel 的自定义事件，同时可以自定义传递的参数。
总结
vue-decorators 是一个非常实用的 Vue.js 装饰器库，可以大大提高我们的开发效率。本文介绍了几个常用的装饰器及其使用方法，希望可以帮助大家更好地使用 vue-decorators。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005589b81e8991b448d5de0