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
})
}
}
Top comments (0)