前言
我司基于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()"