使用 vue-class-setup 编写 class 风格组合式API，支持Vue2和Vue3

最新推荐文章于 2024-07-05 15:47:46 发布

lzxb4

最新推荐文章于 2024-07-05 15:47:46 发布

阅读量1.4k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/lzxb4/article/details/127005365

本文介绍了如何使用vue-class-setup库在Vue2.7和Vue3.x中编写class风格的组合式API，解决组件参数和事件类型的校验问题。文章探讨了该库的诞生背景、最佳实践、多类实例处理、PassOnTo装饰器、Watch装饰器的使用，以及为何选择使用class风格。同时，提到了vue-genesis库对于SSR和微服务架构的支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

我司基于vue-class-component开发的项目有上百个，其中部署的 SSR 服务也接近100个，如此庞大体量的项目一开始的时候还幻想着看看是否要升级Vue3，结果调研一番下来，才发现vue-class-component对Vue3的支持，最后一个版本发布都过去两年了，迟迟还没有发布正式版本。目前基本上处于无人维护的状态，而且升级存在着大量的破坏性更新，对于未来是否还要继续使用Vue3现在还是持保留意见，但是不妨碍我们先把组件库做成Vue2和Vue3通用，于是就有了本文。

在过去的三年里，vue-class-component最大的问题是就是无法正确的校验组件的传参，事件类型，这给我带来了巨大的阴影，在经过一番调研后，惊喜的发现使用defineComponent定义的组件，在Vue2.7和3.x都可以正确的识别类型，所以先计划内部的组件库先做到同时支持Vue2和Vue3，如果后面还要继续采用Vue3就变得容易得多。

于是，回到了开头，调研了一番vue-class-component在Vue3的支持，目前最新的版本是8.0.0-rc.1，结果大失所望，目前基本上处于无人维护的状态，社区内又没有一个能满足我需求的，同时支持Vue2和Vue3的。

诞生想法

鉴于vue-class-component组件目前无法做到正确的组件类型检验，当我惊喜的发现组合式API写出来的代码可以被正确的识别类型时，诞生了一个使用 class 风格来编写组合式API的想法，于是花费一个月的实践，踩遍了所有的坑，终于诞生了vue-class-setup，一个使用 class 风格来编写代码的库，它gzip压缩后，1kb大小。

快速开始

npm install vue-class-setup

<script lang="ts">
import { defineComponent } from 'vue';
import { Setup, Context } from 'vue-class-setup';

// Setup 和 Context 必须一起工作
@Setup
class App extends Context {
    private _value = 0;
    public get text() {
        return String(this._value);
    }
    public set text(text: string) {
        this._value = Number(text);
    }
    public onClick() {
        this._value++;
    }
}
export default defineComponent({
    // 注入类实例的逻辑
    ...App.inject(),
});
</script>
<template>
    <div>
        <p>{
  
  { text }}</p>
        <button @click="onClick()"></button>
    </div>
</tem