在 Vue 中使用注解（装饰器）

最新推荐文章于 2024-09-12 08:20:55 发布

苍石

最新推荐文章于 2024-09-12 08:20:55 发布

阅读量4.3k

点赞数 2

分类专栏： Javascript Vue

本文链接：https://blog.csdn.net/palerock/article/details/108827892

版权

本文介绍了如何在 Vue 项目中使用注解（装饰器），详细讲解了配置环境和实际应用的步骤，包括安装相关依赖、配置 Babel，以及如何使用 @Component、@Prop、@Watch 等注解简化组件声明和状态管理。

摘要由CSDN通过智能技术生成

在 Vue 中使用注解（装饰器）

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.config.js 文件内容如下:

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(){
   
        alert(this.message);
    }

}

至此，感受到不一样了么，在没有使用注解的情况下，应该是如下所示：

export default {
   
    name: 'HelloWorld',
    data(){
   
        return {
   
            message: 'hello annotate'
        }
    },
    methods: {
   
        alertMessage(){