使用 vue-class-setup 編寫 class 風格組合式API，支援Vue2和Vue3

狼族小狽發表於2022-09-23

前言

我司基於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 風格來編寫程式碼的，不妨來關注一下

vue-class-setup

如果你的業務複雜，需要使用 SSR 和微服務架構，不妨也關注一下

vue-genesis

本作品採用《CC 協議》，轉載必須註明作者和本文連結

如何使用dotnet core 編寫REST風格API
2018-12-18
RESTAPI
TypeScript 與組合式 API
2024-04-10
TypeScriptAPI
軟體編寫風格
2018-10-27
Vue3組合式函式最佳實踐（一）
2022-06-21
Vue函式
[Vue]淺談Vue3組合式API帶來的好處以及選項API的壞處
2021-11-16
VueAPI
在普通的html頁面用Vue3組合式API寫的專案（無需Node.js環境和構建專案）
2024-02-20
HTMLVueAPINode.js
記一次在老掉牙的Vue2專案中引入TypeScript和組合式Api的艱辛歷程
2022-01-14
VueTypeScriptAPI
一個 OpenTiny，Vue2 Vue3 都支援！
2023-04-07
Vue
RESTful風格API
2020-09-29
RESTAPI
Windows風格的個人網盤，支援文件線上編輯
2023-12-07
Windows
PEP 8 程式程式碼的編寫風格指南
2019-12-24
用 Haskell 編寫 CEK 風格的直譯器
2013-01-16
Haskell
編碼風格和開發習慣
2016-01-22
RESTful api風格介紹
2018-09-20
RESTAPI
快速上手Vue Router和組合式API：建立靈活可定製的佈局
2023-04-26
VueAPI
優步公司的Go語言編寫風格指南
2019-10-12
Go
【前端Vue】Vue3+Pinia小兔鮮電商專案第1篇：認識Vue3,1. Vue3組合式API體驗【附程式碼文件】
2024-03-17
前端VueAPI
vue3程式碼編寫
2022-07-16
Vue
編寫可維護的JavaScript-程式設計風格
2018-03-15
JavaScript程式設計
JavaScript編碼風格指南
2019-02-24
JavaScript
JavaScript 編碼風格指南
2018-07-24
JavaScript
部落格寫作API
2008-06-27
API
如何使用 Pyramid 和 Cornice 編寫 Python Web API
2020-01-16
PythonWebAPI
手寫 Vue2 系列之編譯器
2022-03-16
Vue編譯
vue3和vue2 的區別，vue3和vu2到底哪個好呢？
2022-11-23
Vue
Vue2 和 Vue3 效能比較小實驗
2023-02-24
Vue
Vue如何解決元件相容Vue2和Vue3?
2023-02-16
Vue元件
使用 Vue Demi 構建同時相容Vue2和Vue3的元件庫
2022-02-17
Vue元件
如何使用 Flask 編寫 Python Web API
2019-12-21
FlaskPythonWebAPI
談談JavaScript編碼風格
2019-04-10
JavaScript
PHP編碼風格規範
2019-08-02
PHP
良好的HTML編碼風格
2018-01-22
HTML
CoffeeScript 編碼風格指南
2014-08-27
Python 編碼風格指南
2016-03-30
Python
Vue3，用組合編寫更好的程式碼：動態返回(3/4)
2022-07-14
Vue
Vue3，用組合的方式來編寫更好的程式碼(1/5)
2022-06-30
Vue
c風格讀寫檔案
2018-12-20
中文寫作排版風格指南
2021-01-13