vue-class-setup Write class style combination API

npm install vue-class-setup

<script lang="ts">
import { defineComponent } from 'vue';
import { Setup, Context } from 'vue-class-setup';
// Setup and Context must work together@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({
    // Logic for injecting class instances    ...(),
});
</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';
// Pass in the component's Props and Emit to get the correct `Props` and `Emit` types in combination@Setup
class App extends Define<Props, Emit> {
    // ✨ You can directly define the default value of Props here, without using a Prop decorator like vue-property-decorator    public readonly dest = '--';
    // Automatically convert to Vue's 'compute'    public get text() {
        return String();
    }
    public click(evt: MouseEvent) {
        // Launch event, can correctly identify the type        this.$emit('click', evt);
    }
}
/**
  * Here is another example of using in the setup function. It is recommended to use `defineComponent` by default.
  * If there are multiple class instances, you can also instantiate the class in the setup
  * <script lang="ts" setup>
  * const app = new App();
  * <\/script>
  * <template>
  * <div>{{ }}</div>
  * </template>
  */
export default defineComponent({
    ...(),
});
&lt;/script&gt;
&lt;script lang="ts" setup&gt;
// If you define a type in the setup, you need to export itexport interface Props {
    value: number;
    dest?: string;
}
export interface Emit {
    (event: 'click', evt: MouseEvent): void;
}
// There is no need to use variables to receive here. You can use Vue's compiled macros to generate the correct Props and Emits for the component.// ❌ const props = defineProps&lt;Props&gt;();
// ❌ const emit = defineEmits&lt;Emit&gt;();
defineProps&lt;Props&gt;(); //  ✅
defineEmits&lt;Emit&gt;(); //  ✅
// This default value definition is no longer recommended, but is declared directly on the class// ❌ withDefaults(defineProps&lt;Props&gt;(), { dest: '--' });
// ✅ @Setup
// ✅ class App extends Define&lt;Props, Emit&gt; {
// ✅     public readonly dest = '--'
// ✅ }
// Setup decorator will automatically use reactive to wrap the class when the class is instantiated.// If you instantiate it manually in setup, you don't need to perform reactive again// const app = reactive(new App()); // ❌
// const app = new App();           // ✅
&lt;/script&gt;
&lt;template&gt;
    &lt;button class="btn" @click="click($event)"&gt;
        &lt;span class="text"&gt;{{ text }}&lt;/span&gt;
        &lt;span class="props-dest"&gt;{{ dest }}&lt;/span&gt;
        &lt;span class="props-value"&gt;{{ $ }}&lt;/span&gt;
    &lt;/button&gt;
&lt;/template&gt;

<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();
    }
    @PassOnTo(onBeforeMount)
    public init() {
        ++;
    }
}
@Setup
class Left extends Base {
    public left = 0;
    public get text() {
        return String(`value:${}`);
    }
    public init() {
        ();
        ++;
    }
    @PassOnTo(onMounted)
    public initLeft() {
        ++;
    }
}
@Setup
class Right extends Base {
    public right = 0;
    public init() {
        ();
        ++;
    }
    @PassOnTo(onMounted)
    public initLeft() {
        ++;
    }
}
</script>
<script setup lang="ts">
const left = new Left();
const right = new Right();
</script>
<template>
    <p class="left">{{  }}</p>
    <p class="right">{{  }}</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() {
        ++;
    }
    @Watch('value')
    public watchValue(value: number, oldValue: number) {
        if (value > 100) {
             = 100;
        }
    }
    @Watch('value', { immediate: true })
    public watchImmediateValue(value: number, oldValue: number | undefined) {
        if (typeof oldValue === 'undefined') {
             = 10;
        } else {
            ++;
        }
    }
}
</script>
<script setup lang="ts">
const app = new App();
</script>
<template>
    <p class="value">{{  }}</p>
    <p class="immediate-value">{{  }}</p>
    <button @click="()">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({
    ...(),
});
</script>
<script lang="ts" setup>
const app = ();
defineExpose({
    addValue: ,
});
</script>
<template>
    <div>
        <p class="text">{{ text }}</p>
        <p class="text-eq">{{  === text }}</p>
        <button @click="addValue"></button>
    </div>
</template>