vue-class-setup 编写 class 风格组合式API

 更新时间:2022年09月23日 09:05:57   作者:狼族小狈  
这篇文章主要为大家介绍了vue-class-setup 编写 class 风格组合式API,支持Vue2和Vue3,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

我司基于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-decoratorWatch 装饰器时,他会接收一个字符串类型,它不能正确的识别类实例是否存在这个字段,但是现在 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的资料请关注脚本之家其它相关文章!

相关文章

  • 基于Vue3实现日历组件的示例代码

    基于Vue3实现日历组件的示例代码

    日历在很多地方都可以使用的到,这篇文章主要介绍了如何利用vue3实现简单的日历控件,文中通过示例代码讲解详细,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue页面使用js实现前端打印功能

    vue页面使用js实现前端打印功能

    这篇文章主要介绍了vue页面使用js实现前端打印功能,文中通过图文结合的方式给大家讲解的非常详细,对大家实现打印功能有一定的帮助,需要的朋友可以参考下
    2024-05-05
  • vue-resource 获取本地json数据404问题的解决

    vue-resource 获取本地json数据404问题的解决

    这篇文章主要介绍了vue-resource 获取本地json数据404问题的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 基于Vue.js 2.0实现百度搜索框效果

    基于Vue.js 2.0实现百度搜索框效果

    这篇文章主要为大家详细介绍了基于Vue.js 2.0实现百度搜索框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • vue3项目中的el-carousel 轮播图的使用

    vue3项目中的el-carousel 轮播图的使用

    Carousel(走马灯)是一种常见的前端组件,通常用于展示多个项目(通常是图片或内容块)的轮播效果,这篇文章主要介绍了vue3项目中的el-carousel 轮播图的使用,需要的朋友可以参考下
    2024-02-02
  • vue的style绑定background-image的方式和其他变量数据的区别详解

    vue的style绑定background-image的方式和其他变量数据的区别详解

    今天小编就为大家分享一篇vue的style绑定background-image的方式和其他变量数据的区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue项目部署到nginx/tomcat服务器的实现

    vue项目部署到nginx/tomcat服务器的实现

    这篇文章主要介绍了vue项目部署到nginx/tomcat服务器的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 详解vue-cli官方脚手架配置

    详解vue-cli官方脚手架配置

    这篇文章主要介绍了详解vue-cli官方脚手架配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue中配置后端接口服务信息详解

    vue中配置后端接口服务信息详解

    这篇文章主要介绍了vue中配置后端接口服务信息详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Nginx部署前端Vue项目的步骤、常见问题与解决方案

    Nginx部署前端Vue项目的步骤、常见问题与解决方案

    在现代Web开发中,Vue.js成为前端开发者构建单页应用的热门框架,Nginx以其高性能和稳定性,成为部署Vue项目的理想选择,这篇文章主要介绍了Nginx部署前端Vue项目的步骤、常见问题与解决方案,需要的朋友可以参考下
    2024-09-09

最新评论