让 Vueer 融入切面编程的队伍

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

🚀技术&代码分享

• 我在 94Code 总结技术学习；
• 我在 1024Code 在线编写代码；
• 我在 掘金 分享技术文章；
• 我在 Github 参与开源学习；

😇推荐几个好用的工具

• var-conv 适用于VSCode IDE的代码变量名称快速转换工具
• generator-vite-plugin 快速生成Vite插件模板项目
• generator-babel-plugin 快速生成Babel插件模板项目

进入正题

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

基础项目准备

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

1. 安装 vue-facing-decorator：

   npm install --save vue-facing-decorator

2. 启用 decorator：

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

改造 HelloWorld 组件

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

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

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

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

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

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

4. 定义组件的属性msg：

   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文档详细了解，接下来会通过自定义装饰器来在这个项目中实现一些常用的功能。

---

如果看完觉得有收获，欢迎点赞、评论、分享支持一下。你的支持和肯定，是我坚持写作的动力~