让 Vueer 融入切面编程的队伍 #

🎄Hi~ 大家好，我是小鑫同学，资深 IT 从业者，InfoQ 的签约作者，擅长前端开发并在这一领域有多年的经验，致力于分享我在技术方面的见解和心得

进入正题 #

切面编程是一种编程范式，它允许你在程序执行的不同阶段注入代码，以实现各种功能，例如日志记录、性能监控、安全性检查等。Typescript 提供的实验性功能 Decorator 就是切面编程的实践，在 Vuejs 开发时可以同时搭配 Typescript 来实现。这里使用 Vuejs 官方推荐的社区项目 vue-facing-decorator 开箱体验。

基础项目准备 #

依旧推荐你来1024Code Fork 我的《【项目模板】Vue3+Vite3+Ts4》 开始这次学习，如果你不习惯使用在线的IDE，那么可以将项目导出到本地运行~

1. 安装 vue-facing-decorator：
   shell

   npm install --save vue-facing-decorator
   

2. 启用 decorator：
   json

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

改造 HelloWorld 组件 #

类组件即一个继承自 Vue 父类并且使用 @Component 装饰器来标记一个类。组件因有的 name、emits、components 等选项需配置到 @Component({ /* options */ }) 中。

首先来尝试将项目内置的 HelloWorld 组件改造成 AOP 形式，主要包括了一个响应式的 count 的和一个组件属性 msg，在 template 中对于这两个属性的调用不需要任何的改动。

1. 特别说明：禁止使用<script setup>，所以第一步就是去掉script中的setup；
2. 定义一个空组件：
   typescript

   import { Component, Vue } from "vue-facing-decorator";
   @Component
   export default class HelloWorld extends Vue {}
   

3. 定义响应式的数据count：
   typescript

   const count = ref(0)
   
        ↓↓↓↓↓↓
   
   import { Component, Vue } from "vue-facing-decorator";
   @Component
   export default class HelloWorld extends Vue {
     count = 0;
   }
   

4. 定义组件的属性msg：
   typescript

   defineProps<{ msg: string }>()
   
        ↓↓↓↓↓↓
   
   import { Component, Vue, Prop } from "vue-facing-decorator";
   @Component
   export default class HelloWorld extends Vue {
     @Prop({
       default: ''
     })
     msg!: string
   }
   

至此 HelloWorld 组件由可以正常的使用的，在 class 中定义的属性将是一个响应式的数据，定义一个 Prop 则需要用到 @Prop 装饰器来实现。

APO + 命令式 Dialog 组件 #

命令式的 Dialog 组件指的是组件的状态由组件本身提供，父组件通过 Dialog 组件的实例来操作 Dialog 组件对外提供的函数的方式。

需要安装ant-design-vue组件库并做如下配置：

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

createApp(App).use(Antd).mount('#app');

1. 定义一个 BusinessDialog 类组件： #

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

@Component
export default class BusinessDialog extends Vue{}

2. 定义一个 visible 和 开启、关闭的函数： #

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

@Component
export default class BusinessDialog extends Vue{
  visible = false;

  open() {
    this.visible = true
  }
  
  close() {
   this.visible = false 
  }
}

3. 配置组件支持将open暴露给父组件： #

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

@Component({
  expose: ['open']
})
export default class BusinessDialog extends Vue{
  visible = false;

  open() {
    this.visible = true
  }
  
  close() {
   this.visible = false 
  }
}

4. 定义一个 emit，在关闭 Dialog 后通知到父组件： #

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

@Component({
  expose: ['open']
})
export default class BusinessDialog extends Vue{
  visible = false;

  open() {
    this.visible = true
  }
  
  close() {
   this.visible = false 
  }

  @Emit("complete")
  handleOk() {
    this.close();
    return 200;
  };
}

PS：在 App 组件中你依然可以使用非类组件，在 App 组件中提供了使用 Dialog 组件的示例。

在线预览

总结 #

一个融入切面编程的 Vuejs 项目就完成了上手操作，更多的装饰器的使用可以通过vue-facing-decorator文档详细了解，接下来会通过自定义装饰器来在这个项目中实现一些常用的功能。