Javascript 中的注解（装饰器）
谈及注解/装饰器，使用过 Java 或 Python 的同学一定会想到一种语法：@Annotate 或 @Decorator，虽然叫法不同，但本质上都是实现同样的功能，面向切面编程，使你所写的代码变得干净清爽，将一些复杂的逻辑隐藏在注解（装饰器）中。
但是，在 Javascript 的标准语法中，并没有类似的写法，如果想要实现类似的语法，那该怎么办呢？
由于 Javascript 也是一直在进步中，语法越来越丰富，不断有新的语法提案被提出，其中也就包括了 proposal-decorators 这个提案，其主要提供了一系列在 Javascript 中使用装饰器的语法及定义。
那么要怎样才能使用这个语法呢？由于其本身只是一个提案，其语法并不能直接使用，不过 Babel 提供了其语法支持：@babel/plugin-proposal-decorators
与 Vue 一起使用
既然能够在 Javascript 中使用注解，那么能不能在 Vue 项目中使用该语法呢，Vue2 Annotate 便解决了该问题，通过引用该框架，便可以将 Vue 项目重构为使用注解（装饰器）的项目。
为了简单演示，所以演示代码基于 vue-cli v4.5.0 构建的初始化项目
第一步：配置环境
首先使用 npm 安装 Vue2 Annotate
npm install @palerock/vue2-annotate -s 或使用 yarn 添加依赖
yarn add @palerock/vue2-annotate 因为要使用注解语法，我们需要在 Babel 环境中引入相关语法依赖：
npm:
npm install @babel/plugin-proposal-decorators npm install @babel/plugin-proposal-class-properties yarn:
yarn add @babel/plugin-proposal-decorators yarn add @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators 是支持注解语法的插件，@babel/plugin-proposal-class-properties 是支持将 class 语法转化为 es5 的语法插件，因为 Vue CLI 项目本身就有 Babel 7 的依赖，所以只需要引入这两个关键插件
安装依赖完成后，配置根目录下 babel.con 文件内容如下:
module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ], [ "@babel/plugin-proposal-class-properties", { "loose": true } ] ] }; 第二步：使用注解（装饰器）
首先，我们需要知道 Vue2 Annotate 为我们提供了哪些注解，通过文档，我们可以知道其核心注解为 @VueComponent，正常情况下，在一个 Vue 项目中，一般通过以下代码声明一个组件：
export default { name: 'HelloWorld' } 如果我们使用 Vue2 Annotate， 那么将变为：
export default @VueComponent class HelloWorld {} 可以看出，原来是申明为一个对象，在使用注解后，声明的内容是一个 class
那么如果要定义一些属性或方法呢，在使用 Vue2 Annotate 的情况下我们可以通过直接声明成员变量来定义：
export default @VueComponent class HelloWorld { message = 'hello annotate'; alertMessage(){ aler); } } 至此，感受到不一样了么，在没有使用注解的情况下，应该是如下所示：
export default { name: 'HelloWorld', data(){ return { message: 'hello annotate' } }, methods: { alertMessage(){ aler); } } } 由于注解是基于 class，你甚至可以在内部直接定义 getter 或 setter：
export default @VueComponent class HelloWorld { message = 'hello annotate'; // 获取 message 内容以空格分割的最后一部分 get lastPartOfMessage(){ const parts = (' '); return parts[ - 1]; } // 将 message 中以空格分割的最后一部分改为指定内容 set lastPartOfMessage(value){ const parts = (' '); parts[ - 1] = value; = (' '); } // 通过该方法改变 message 的值 displayAndChangeMessage(){ con); // 'annotate' = 'vue2-annotate'; // 改变最后一部分的内容 con); // 'vue2-annotate' con(); // 'hello vue2-annotate' } } 是不是相当简单直观，其效果和在不使用注解时使用 computed 完全一致，但如果不想使用 getter / setter 方法呢，我们可以通过引入 @Computed 注解实现和 Vue 中配置 computed 完全一致的效果，比如将以上代码转化为使用 @Computed
export default @VueComponent class HelloWorld { message = 'hello annotate'; @Computed lastPartOfMessage = { // 获取 message 内容以空格分割的最后一部分 get(){ const parts = (' '); return parts[ - 1]; }, // 将 message 中以空格分割的最后一部分改为指定内容 set(value){ const parts = (' '); parts[ - 1] = value; = (' '); } }; // 通过该方法改变 message 的值 displayAndChangeMessage(){ con); // 'annotate' = 'vue2-annotate'; // 改变最后一部分的内容 con); // 'vue2-annotate' con(); // 'hello vue2-annotate' } } 其效果和以下配置效果完全一致：
export default { name: 'HelloWorld', data(){ return { message: 'hello annotate' } }, computed: { // 获取 message 内容以空格分割的最后一部分 get(){ const parts = (' '); return parts[ - 1]; }, // 将 message 中以空格分割的最后一部分改为指定内容 set(value){ const parts = (' '); parts[ - 1] = value; = (' '); } }, methods: { // 通过该方法改变 message 的值 displayAndChangeMessage(){ con); // 'annotate' = 'vue2-annotate'; // 改变最后一部分的内容 con); // 'vue2-annotate' con(); // 'hello vue2-annotate' } } } 那么定义需要暴露出去的参数 —— props 呢，在使用注解的情况下，我们除了 @VueComponent 还需要引入一个注解 @Props
export default @VueComponent class HelloWorld { @Props msg = String; } 十分简单，其效果和以下代码一致：
export default { name: 'HelloWorld', props: { msg: String } } 类似的注解还有 @Watch 用于监听属性改变：
export default @VueComponent class A { // $$ 表示前缀，用于避免与监听属性冲突 @Watch $$gender(val, oldVal) { } @Watch({deep: true, immediate: true}) $$age(val, oldVal) { } @Watch('name') handleNameChanged = 'handleAgeChanged'; @Watch({property: 'name', deep: true}) handleNameChanged2(val, oldVal) { } } 相当于：
export default { name: 'A', watch: { age: { handler(val, oldVal) { }, deep: true, immediate: true }, gender(val, oldVal) { }, name: [ 'handleAgeChanged', { handler(val, oldVal) { } } ] } } 通过使用注解，可以简化很多烦杂的操作，比如 @Model 注解，顾名思义，这个注解适用于支持 Vue 中的 v-model 指令，例子如下：
export default @VueComponent class CustomInput { @Model('value') // prop 属性为 value, 被装饰属性名为 content content = String; } 以上代码申明了一个类型为 String，名为 value 的参数，并将其设为 model，与通常 Vue 项目中以下代码效果完全一致：
export default { name: 'CustomInput', props: { value: String }, model: { prop: 'value', event: 'change' }, computed: { content: { get() { return ; }, set(value) { this.$emit('change', value); } } } } 除了以上注解，作者表示还有更多的注解正在开发中，如 @Provide, @Inject 等，但如果现在就想要使用这些功能呢，该插件提供了一个将 Vue 原配置转化为可以在 class 中使用的注解：@NativeApi，示例如下：
@VueComponent class HelloWorld{ @NativeApi components = {}; @NativeApi provide(){ return { message: 'message' }; } @NativeApi inject = ['parentProvide']; @NativeApi data(){ return { message: 'hello annotate' } } @NativeApi computed = { test(){ return ''; } }; @NativeApi created(){ // 生命周期函数 } // ...等等 } 等同于：
export default{ name: 'HelloWorld', components : {}, provide(){ return { message: 'message' }; }, inject: ['parentProvide'], data(){ return { message: 'hello annotate' } }, computed: { test(){ return ''; } }, created(){ // 生命周期函数 } } 总结
注解（装饰器）语法可以使项目变得简单明了，在 Java 的开发中，相信有不少小伙伴对注解的魅力有着不浅的认识吧，而在 Javascript 的 Vue 项目中，使用注解（装饰器）语法也是相当简洁优雅的，其缺点也是明显，由于语法处于提案状态，使用它需要 Babel 进行额外的编译工作，配置额外的环境，不过现在就算是 TypeScript 也需要编译才能运行，无伤大雅。
1.《.vue 如何写注释？我来告诉你答案在 Vue 中使用注解（装饰器）》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《.vue 如何写注释？我来告诉你答案在 Vue 中使用注解（装饰器）》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/gl/2228835.html
