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({
    // 注入類(lèi)實(shí)例的邏輯
    ...App.inject(),
});
</script>
<template>
    <div>
        <p>{{ text }}</p>
        <button @click="onClick()"></button>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Setup, Define } from 'vue-class-setup';
// 傳入組件的 Props 和 Emit，來(lái)讓組合類(lèi)獲取正確的 `Props` 和 `Emit` 類(lèi)型
@Setup
class App extends Define<Props, Emit> {
    // ? 你可以直接這里定義Props的默認(rèn)值，不需要像 vue-property-decorator 那樣使用一個(gè) Prop 裝飾器來(lái)定義
    public readonly dest = '--';
    // 自動(dòng)轉(zhuǎn)換成 Vue 的 'computed'
    public get text() {
        return String(this.value);
    }
    public click(evt: MouseEvent) {
        // 發(fā)射事件，可以正確的識(shí)別類(lèi)型
        this.$emit('click', evt);
    }
}
/**
 * 這里提供了另外一種在 setup 函數(shù)中使用的例子，默認(rèn)推薦使用 `defineComponent`
 * 如果有多個(gè)類(lèi)實(shí)例，也可以在 setup 中實(shí)例化類(lèi)
 * <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 中定義類(lèi)型，需要導(dǎo)出一下
export interface Props {
    value: number;
    dest?: string;
}
export interface Emit {
    (event: 'click', evt: MouseEvent): void;
}
// 這里不再需要使用變量來(lái)接收，可以利用 Vue 的編譯宏來(lái)為組件生成正確的 Props 和 Emit
// ? const props = defineProps<Props>();
// ? const emit = defineEmits<Emit>();
defineProps<Props>(); //  ?
defineEmits<Emit>(); //  ?
// 這種默認(rèn)值的定義，也不再推薦，而是直接在類(lèi)上聲明
// ? withDefaults(defineProps<Props>(), { dest: '--' });
// ? @Setup
// ? class App extends Define<Props, Emit> {
// ?     public readonly dest = '--'
// ? }
// Setup 裝飾器，會(huì)在類(lèi)實(shí)例化時(shí)，自動(dòng) 使用 reactive 包裝類(lèi)，
// 如果你在 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>

<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>

import { onMounted } from 'vue';
@Setup
class App extends Define {
    @PassOnTo(onMounted)
    public onMounted() {}
}

<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>

<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>