Vuejs装饰器风格开发教程（前言、模板项目、类属性、类方法）-CFANZ编程社区

教程前言

AOP 切面编程是面向对象开发中的一种经典的编程范式，旨在将横切关注点与核心业务逻辑分离来提高代码的模块性和可维护性。如：日志记录、事务管理等就属于横切关注点。在为 H5 提供 Android 原生支持时，曾将插件模块改造为 AOP 模式，实现插件的自动注册。Java 领域的 SpringBoot 就是典型的切面编程引领者。

Vuejs 的开发风格其实是多样的，按 API 可分为：options api 和 composition api，按 UI 开发可分为：template 、jsx/tsx，渲染函数。除此之外 Vuejs 还提供了各种语法糖，就比如说为 setup() 函数提供了 setup 语法糖。

在 Vuejs 开发者中有一小众的人群就习惯使用装饰器风格做开发，也就是 AOP 切面编程模式，主要利用的 ECMAScript 提供了 class 和仍处在实验阶段的 decorator，目前 Vuejs 社区不再建议在 Vue 3 中使用基于类的组件，仍想使用类组件推荐使用 vue-facing-decorator。

如果你是从 Java （后端、安卓）转向的 Vuejs 还是 Angular （前端）转向的 Vuejs，对于已经习惯 AOP 切面编程的小伙伴来说，还是可以尝试这种装饰器风格的开发的。对于觉得 “本末倒置的” 的小伙伴我想说：存在即合理。

模板项目

仅两步快速创建项目：

推荐使用 1024Code 智能协同IDE进行教程学习，1024Code 是一个免费的、协作式的、基于浏览器的 IDE 环境，支持 10 多种编程语言，支持 Spring 、Vue 、React 等框架，还支持很多图形库，并集成了 AI 编程助手、编程社区。拥有无需安装环境，任何设备开箱即用的特性，是刚入门的程序员学习编程，与朋友一起创造作品，分享交流的最佳选择。

1、搜索社区代码空间：【项目模板】Vue3+Vite3+Ts4；

2、点击进入项目后 Fork 此空间；

安装 vue-facing-decorator

使用任意包管理器安装 vue-facing-decorator

npm install --save vue-facing-decorator

^注: 在1024Code 右侧切换到 Shell 页签可执行安装命令。

在 tsconfig.json 中启用装饰器

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

定义和使用类组件

在默认的 HelloWorld 组件中，提供了一个 msg 和一个响应式的自增 count 属性，接着就尝试使用 vue-facing-decorator 改造它。在 vue-facing-decorator 中禁止使用 composition api <script setup lang="ts">。

1、首先移除 setup 语法糖，再申明 HelloWorldComponent 类组件，继承自 Vue 并增加 @Component 装饰器

import { Component, Vue } from 'vue-facing-decorator';

@Component
class HelloWorldComponent extends Vue {}
export default HelloWorldComponent;

2、响应式的 count 属性使用类属性来描述，同样也是响应式的：

import { Component, Vue } from 'vue-facing-decorator';

@Component
class HelloWorldComponent extends Vue {
  count: number = 0;
}
export default HelloWorldComponent;

3、组件属性 msg 则需要在类属性的基础上使用 @Prop 装饰描述：

import { Component, Prop, Vue } from 'vue-facing-decorator';

@Component
class HelloWorldComponent extends Vue {
  @Prop
  msg: string;
}
export default HelloWorldComponent;

^注: App.vue 无需任何调整整个模板项目就再次运行起来了。

类属性

在类组件中，vfd 项目会分析类属性来构建 Vuejs 组件中 data 函数的返回值，同时这些类属性也是可响应的。

<script lang="ts">
import {Component, Vue} from 'vue-facing-decorator';
@Component({
  name: 'App',
})
export default class App extends Vue {
  // 定义类属性
  slogan = 'HelloWorld';
}
</script>

<template>
  {{slogan}}
</template>

类方法

在类组件中，vfd 项目会分析类方法来构建 Vuejs 组件中 methods 选项。如：在 App 组件中定义 caseSwitching 函数，用来切换 slogan 大小写。

<script lang="ts">
import {Component, Vue} from 'vue-facing-decorator';
@Component({
  name: 'App',
})
export default class App extends Vue {
  // 定义类属性
  slogan = 'hello world';
  isLowerCase = true;
  
  // 定义类方法
  caseSwitching() {
    if(this.isLowerCase) {
      this.slogan = this.slogan.toUpperCase();
      this.isLowerCase = false;
    }else{
      this.slogan = this.slogan.toLowerCase()
      this.isLowerCase = true;
    }
  }
}
</script>
<template>
  {{slogan}}
  <button @click="caseSwitching">大小写切换</button>
</template>