Use class to write setup, and support vue2 and vue3

狼族小狈 — Tue, 02 Aug 2022 12:57:00 +0000

vue-class-setup

Use class to write setup, and support vue2 and vue3

Only 1.34 KiB after gzip compression

Install

npm install vue-class-setup
# or
yarn add vue-class-setup

Usage

<template>
    <p>{{ count.text }}</p>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Setup, Hook } from 'vue-class-setup';

@Setup
class Count {
    public value = 0;
    public get text() {
        return String(this.value);
    }
    @Hook('mounted')
    public init() {
        this.value++;
    }
}

export default defineComponent({
    setup() {
        return {
            count: new Count()
        }
    }
})
</script>

Computed

Using the get accessor or computed hook, it will be converted to computed

import { Setup, Hook } from 'vue-class-setup';

@Setup
class Count {
    public get time() {
        return Date.now();
    }
    @Hook('computed')
    public getTime() {
        return Date.now();
    }
}

Custom setup

import { Setup, Hook } from 'vue-class-setup';

@Setup
class Count {
    @Hook('setup')
    public setup() {
        // Your code
    }
}

How to use watch?

Watch parameters are complex, so decorators are not supported, but setup hooks are provided

import { watch } from 'vue';
import { Setup, Hook } from 'vue-class-setup';

@Setup
class Count {
    public value = 0;
    @Hook('setup')
    public setup() {
        watch(() => this.value, (value) => {
            // Your code
        })
    }
}

DEV Community: 狼族小狈