在 Vue.js 应用程序中，使用装饰器可以使代码更加简洁，易于阅读和维护。 vue-property-decorator 是一个 NPM 包，它提供了一些常用的 Vue.js 装饰器，以帮助我们更好地组织代码。
安装
您可以使用 npm 或 yarn 安装 vue-property-decorator。
# 使用 npm npm install vue-property-decorator --save-dev # 使用 yarn yarn add vue-property-decorator --dev
使用
要使用 vue-property-decorator，请在你的 Vue 组件中导入所需的装饰器。
import { Component, Vue, Prop } from 'vue-property-decorator';@Component
@Component 装饰器用于声明 Vue.js 组件类，并将其注册到全局或局部的组件。
@Component({
name: 'my-component',
})
export default class MyComponent extends Vue {
// ...
}@Prop
@Prop 装饰器用于定义 Vue.js 组件的属性，并指定其类型、默认值和验证规则。
@Component
export default class MyComponent extends Vue {
@Prop(Number) readonly propA!: number;
@Prop({ default: 'default value' }) readonly propB!: string;
@Prop([String, Number]) readonly propC!: string | number;
// ...
}@Watch
@Watch 装饰器用于监听 Vue.js 组件的属性或方法的变化，并在发生变化时执行回调函数。
-- -------------------- ---- -------
----------
------ ------- ----- ----------- ------- --- -
------------- -------- ------- -------
---------------
------------------------ ------- --------- ------- -
-- ---
-
-- ---
-@Emit
@Emit 装饰器用于从 Vue.js 组件中触发自定义事件。
-- -------------------- ---- -------
----------
------ ------- ----- ----------- ------- --- -
-------
--------------- -
-- ---
-
-- ---
-示例代码
下面是一个使用 vue-property-decorator 的示例组件：
-- -------------------- ---- -------
------ - ---------- ---- ----- ------ ---- - ---- -------------------------
------------
----- -----------
--
------ ------- ----- ------- ------- --- -
------------- -------- ------- -------
-------------- -------- ---------- --------
------------- -------- ------- -------
------- ---------- - ---
---------------
------------------------ ------- -
--------------- - ---------
-
-------
------------------- ------- -
------ -----------
-
--- -------------- -
------ -
----------- --------------
--
-
-------------------- ----------- -
----- ------ - ------------ -- -----------------
--------------- - -------------
------------------- -----------------
-
-------- -
------ -
-----
---------------------------
------
-----------
-------------------------
-----------------------
------------------------
----------------------------
--
------
--
-
-在上面的示例中，我们声明了一个名为 MyInput 的 Vue.js 组件类，并使用 @Component 装饰器将其注册到全局或局部的组件。该组件具有三个属性：label、disabled 和 value，并通过 @Prop 装饰器进行定义。MyInput 组件还定义了一个名为 inputValue 的私有属性，用于跟踪输入框的值。
我们还定义了两个方法：onValueChanged 和 onInput。onValueChanged 方法使用 @Watch 装饰器监听了 value 属性的变化，并将新值赋给 inputValue 属性。onInput 方法使用 @Emit
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/53730