前言
我司基于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> </template>
尝试多很多种方案,最终采用了上面的形式为最佳实践,它无法做到export default
直接导出一个类,必须使用defineComponent
来包装一层,因为它只是一个组合类(API)
,并非是一个组件。
最佳实践
<script lang="ts"> import { defineComponent } from 'vue'; import { Setup, Define } from 'vue-class-setup'; // 传入组件的 Props 和 Emit,来让组合类获取正确的 `Props` 和 `Emit` 类型 @Setup class App extends Define<Props, Emit> { // ✨ 你可以直接这里定义Props的默认值,不需要像 vue-property-decorator 那样使用一个 Prop 装饰器来定义 public readonly dest = '--'; // 自动转换成 Vue 的 'computed' public get text() { return String(this.value); } public click(evt: MouseEvent) { // 发射事件,可以正确的识别类型 this.$emit('click', evt); } } /** * 这里提供了另外一种在 setup 函数中使用的例子,默认推荐使用 `defineComponent` * 如果有多个类实例,也可以在 setup 中实例化类 * <script lang="ts" setup> * const app = new App(); * <\/script> * <template> * <div>{{ app.text }}</div> * </template> */ export default defineComponent({ ...App.inject(), }); </script> <script lang="ts" setup> // 如果在 setup 中定义类型,需要导出一下 export interface Props { value: number; dest?: string; } export interface Emit { (event: 'click', evt: MouseEvent): void; } // 这里不再需要使用变量来接收,可以利用 Vue 的编译宏来为组件生成正确的 Props 和 Emit // ❌ const props = defineProps<Props>(); // ❌ const emit = defineEmits<Emit>(); defineProps<Props>(); // ✅ defineEmits<Emit>(); // ✅ // 这种默认值的定义,也不再推荐,而是直接在类上声明 // ❌ withDefaults(defineProps<Props>(), { dest: '--' }); // ✅ @Setup // ✅ class App extends Define<Props, Emit> { // ✅ public readonly dest = '--' // ✅ } // Setup 装饰器,会在类实例化时,自动 使用 reactive 包装类, // 如果你在 setup 手动实例化,则不需要再执行一次 reactive // const app = reactive(new App()); // ❌ // const app = new App(); // ✅ </script> <template> <button class="btn" @click="click($event)"> <span class="text">{{ text }}</span> <span class="props-dest">{{ dest }}</span> <span class="props-value">{{ $props.value }}</span> </button> </template>
多个类实例
在一些复杂的业务时,有时需要多个实例
<script lang="ts"> import { onBeforeMount, onMounted } from 'vue'; import { Setup, Context, PassOnTo } from 'vue-class-setup'; @Setup class Base extends Context { public value = 0; public get text() { return String(this.value); } @PassOnTo(onBeforeMount) public init() { this.value++; } } @Setup class Left extends Base { public left = 0; public get text() { return String(`value:${this.value}`); } public init() { super.init(); this.value++; } @PassOnTo(onMounted) public initLeft() { this.left++; } } @Setup class Right extends Base { public right = 0; public init() { super.init(); this.value++; } @PassOnTo(onMounted) public initLeft() { this.right++; } } </script> <script setup lang="ts"> const left = new Left(); const right = new Right(); </script> <template> <p class="left">{{ left.text }}</p> <p class="right">{{ right.text }}</p> </template>
PassOnTo
在类实例准备就绪后,PassOnTo 装饰器,会将对应的函数,传递给回调,这样我们就可以顺利的和 onMounted
等钩子一起配合使用了
import { onMounted } from 'vue'; @Setup class App extends Define { @PassOnTo(onMounted) public onMounted() {} }
Watch
在使用 vue-property-decorator
的 Watch
装饰器时,他会接收一个字符串类型,它不能正确的识别类实例是否存在这个字段,但是现在 vue-class-setup 能检查你的类型是否正确,如果传入一个类实例不存在的字段,类型将会报错
<script lang="ts"> import { Setup, Watch, Context } from 'vue-class-setup'; @Setup class App extends Context { public value = 0; public immediateValue = 0; public onClick() { this.value++; } @Watch('value') public watchValue(value: number, oldValue: number) { if (value > 100) { this.value = 100; } } @Watch('value', { immediate: true }) public watchImmediateValue(value: number, oldValue: number | undefined) { if (typeof oldValue === 'undefined') { this.immediateValue = 10; } else { this.immediateValue++; } } } </script> <script setup lang="ts"> const app = new App(); </script> <template> <p class="value">{{ app.value }}</p> <p class="immediate-value">{{ app.immediateValue }}</p> <button @click="app.onClick()">Add</button> </template>
defineExpose
在一些场景,我们希望可以暴露组件的一些方法和属性,那么就需要使用 defineExpose
编译宏来定义导出了,所以提供了一个.use
的类静态方法帮你获取当前注入的类实例
<script lang="ts"> import { defineComponent } from 'vue'; import { Setup, Context } from 'vue-class-setup'; @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 addValue() { this._value++; } } export default defineComponent({ ...App.inject(), }); </script> <script lang="ts" setup> const app = App.use(); defineExpose({ addValue: app.addValue, }); </script> <template> <div> <p class="text">{{ text }}</p> <p class="text-eq">{{ app.text === text }}</p> <button @click="addValue"></button> </div> </template>
为什么使用 class ?
其实不太想讨论这个问题,喜欢的自然会喜欢,不喜欢的自然会不喜欢,世上本无路,走的人多了,就有了路。
最后
不管是 选项 API 还是 组合式API,代码都是人写出来的,别人都说 Vue 无法胜任大型项目,但是在我司的实践中经受住了实践,基本上没有产生那种数千行的组件代码。
如果喜欢使用 class 风格来编写代码的,不妨来关注一下
如果你的业务复杂,需要使用 SSR 和微服务架构,不妨也关注一下
以上就是vue-class-setup 编写 class 风格组合式API的详细内容,更多关于vue-class-setup 编写组合式API的资料请关注阿兔在线工具其它相关文章!