클래스를 사용하여 설정을 작성하고 vue2 및 vue3 지원

vue 클래스 설정

클래스를 사용하여 설정을 작성하고 vue2 및 vue3 지원
gzip 압축 후 단 1.34KiB

설치

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

용법

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

계산됨

get 접근자 또는 computed 후크를 사용하면 computed로 변환됩니다.

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

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

맞춤 설정

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

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

시계를 사용하는 방법?

감시 매개변수가 복잡하므로 데코레이터가 지원되지 않지만 setup 후크가 제공됩니다.

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

깃허브