vue-class-setup?編寫?class?風(fēng)格組合式API
前言
我司基于vue-class-component開發(fā)的項(xiàng)目有上百個(gè),其中部署的 SSR 服務(wù)也接近100個(gè),如此龐大體量的項(xiàng)目一開始的時(shí)候還幻想著看看是否要升級(jí)Vue3,結(jié)果調(diào)研一番下來,才發(fā)現(xiàn)vue-class-component對(duì)Vue3的支持,最后一個(gè)版本發(fā)布都過去兩年了,遲遲還沒有發(fā)布正式版本。目前基本上處于無人維護(hù)的狀態(tài),而且升級(jí)存在著大量的破壞性更新,對(duì)于未來是否還要繼續(xù)使用Vue3現(xiàn)在還是持保留意見,但是不妨礙我們先把組件庫(kù)做成Vue2和Vue3通用,于是就有了本文。
在過去的三年里,vue-class-component最大的問題是就是無法正確的校驗(yàn)組件的傳參,事件類型,這給我?guī)砹司薮蟮年幱埃诮?jīng)過一番調(diào)研后,驚喜的發(fā)現(xiàn)使用defineComponent定義的組件,在Vue2.7和3.x都可以正確的識(shí)別類型,所以先計(jì)劃內(nèi)部的組件庫(kù)先做到同時(shí)支持Vue2和Vue3,如果后面還要繼續(xù)采用Vue3就變得容易得多。
于是,回到了開頭,調(diào)研了一番vue-class-component在Vue3的支持,目前最新的版本是8.0.0-rc.1,結(jié)果大失所望,目前基本上處于無人維護(hù)的狀態(tài),社區(qū)內(nèi)又沒有一個(gè)能滿足我需求的,同時(shí)支持Vue2和Vue3的。
誕生想法
鑒于vue-class-component組件目前無法做到正確的組件類型檢驗(yàn),當(dāng)我驚喜的發(fā)現(xiàn)組合式API寫出來的代碼可以被正確的識(shí)別類型時(shí),誕生了一個(gè)使用 class 風(fēng)格來編寫組合式API的想法,于是花費(fèi)一個(gè)月的實(shí)踐,踩遍了所有的坑,終于誕生了vue-class-setup,一個(gè)使用 class 風(fēng)格來編寫代碼的庫(kù),它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({
// 注入類實(shí)例的邏輯
...App.inject(),
});
</script>
<template>
<div>
<p>{{ text }}</p>
<button @click="onClick()"></button>
</div>
</template>
嘗試多很多種方案,最終采用了上面的形式為最佳實(shí)踐,它無法做到export default直接導(dǎo)出一個(gè)類,必須使用defineComponent 來包裝一層,因?yàn)樗皇且粋€(gè)組合類(API),并非是一個(gè)組件。
最佳實(shí)踐
<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的默認(rèn)值,不需要像 vue-property-decorator 那樣使用一個(gè) Prop 裝飾器來定義
public readonly dest = '--';
// 自動(dòng)轉(zhuǎn)換成 Vue 的 'computed'
public get text() {
return String(this.value);
}
public click(evt: MouseEvent) {
// 發(fā)射事件,可以正確的識(shí)別類型
this.$emit('click', evt);
}
}
/**
* 這里提供了另外一種在 setup 函數(shù)中使用的例子,默認(rèn)推薦使用 `defineComponent`
* 如果有多個(gè)類實(shí)例,也可以在 setup 中實(shí)例化類
* <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 中定義類型,需要導(dǎo)出一下
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>(); // ?
// 這種默認(rèn)值的定義,也不再推薦,而是直接在類上聲明
// ? withDefaults(defineProps<Props>(), { dest: '--' });
// ? @Setup
// ? class App extends Define<Props, Emit> {
// ? public readonly dest = '--'
// ? }
// Setup 裝飾器,會(huì)在類實(shí)例化時(shí),自動(dòng) 使用 reactive 包裝類,
// 如果你在 setup 手動(dòng)實(shí)例化,則不需要再執(zhí)行一次 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>
多個(gè)類實(shí)例
在一些復(fù)雜的業(yè)務(wù)時(shí),有時(shí)需要多個(gè)實(shí)例
<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
在類實(shí)例準(zhǔn)備就緒后,PassOnTo 裝飾器,會(huì)將對(duì)應(yīng)的函數(shù),傳遞給回調(diào),這樣我們就可以順利的和 onMounted 等鉤子一起配合使用了
import { onMounted } from 'vue';
@Setup
class App extends Define {
@PassOnTo(onMounted)
public onMounted() {}
}
Watch
在使用 vue-property-decorator 的 Watch 裝飾器時(shí),他會(huì)接收一個(gè)字符串類型,它不能正確的識(shí)別類實(shí)例是否存在這個(gè)字段,但是現(xiàn)在 vue-class-setup 能檢查你的類型是否正確,如果傳入一個(gè)類實(shí)例不存在的字段,類型將會(huì)報(bào)錯(cuò)
<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
在一些場(chǎng)景,我們希望可以暴露組件的一些方法和屬性,那么就需要使用 defineExpose 編譯宏來定義導(dǎo)出了,所以提供了一個(gè).use的類靜態(tài)方法幫你獲取當(dāng)前注入的類實(shí)例
<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 ?
其實(shí)不太想討論這個(gè)問題,喜歡的自然會(huì)喜歡,不喜歡的自然會(huì)不喜歡,世上本無路,走的人多了,就有了路。
最后
不管是 選項(xiàng) API 還是 組合式API,代碼都是人寫出來的,別人都說 Vue 無法勝任大型項(xiàng)目,但是在我司的實(shí)踐中經(jīng)受住了實(shí)踐,基本上沒有產(chǎn)生那種數(shù)千行的組件代碼。
如果喜歡使用 class 風(fēng)格來編寫代碼的,不妨來關(guān)注一下
如果你的業(yè)務(wù)復(fù)雜,需要使用 SSR 和微服務(wù)架構(gòu),不妨也關(guān)注一下
以上就是vue-class-setup 編寫 class 風(fēng)格組合式API的詳細(xì)內(nèi)容,更多關(guān)于vue-class-setup 編寫組合式API的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue項(xiàng)目使用cdn加速減少webpack打包體積
通過壓縮代碼的手段可減小網(wǎng)絡(luò)傳輸?shù)拇笮?但實(shí)際上最影響用戶體驗(yàn)的還是網(wǎng)頁(yè)首次打開時(shí)的加載等待,其根本原因是網(wǎng)絡(luò)傳輸過程耗時(shí)較大,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用cdn加速減少webpack打包體積的相關(guān)資料,需要的朋友可以參考下2022-08-08
VUE利用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能實(shí)例
本篇文章主要介紹了VUE利用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
vue學(xué)習(xí)之Vue-Router用法實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)之Vue-Router用法,結(jié)合實(shí)例形式分析了Vue-Router路由原理與常見操作技巧,需要的朋友可以參考下2020-01-01
vue2.0使用swiper組件實(shí)現(xiàn)輪播效果
這篇文章主要為大家詳細(xì)介紹了vue2.0使用swiper組件實(shí)現(xiàn)輪播效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11
淺析vue-router實(shí)現(xiàn)原理及兩種模式
這篇文章主要介紹了vue-router實(shí)現(xiàn)原理及兩種模式分析,給大家介紹了vue-router hash模式與history模式不同模式下處理邏輯,需要的朋友可以參考下2020-02-02
vue3使用elementPlus進(jìn)行table合并處理的示例詳解
虛擬數(shù)據(jù)中公司下有多個(gè)客戶,公司一樣的客戶,公司列需要合并,客戶如果一樣也需要合并進(jìn)行展示,所以本文給大家介紹了vue3使用elementPlus進(jìn)行table合并處理的實(shí)例,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
vue項(xiàng)目如何通過url鏈接引入其他系統(tǒng)頁(yè)面
這篇文章主要介紹了vue項(xiàng)目如何通過url鏈接引入其他系統(tǒng)頁(yè)面問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03

