はじめに
- TypescriptとVue3の環境を作成したので、Typescriptのclassを利用して簡単なコンポーネントを作成する
[Vue v3] @ComponentデコレータとVue基本クラス
- @Component名前がに変更され@Optionsます。
- @Options オプションを宣言しない場合はオプションです。
- Vueコンストラクターはvue-class-componentパッケージから提供されます。
- Component.registerHooksはVue.registerHooksに移行する
コード
<template>
<div>{{ count }}</div>
<button @click="increment">+1</button>
</template>
<script>
import { Vue,Options } from 'vue-class-component'
@Options({
// Define component options
watch: {
count: value => {
console.log(`watch! ${value}`)
}
},
computed: {
count: () => {
console.log(`watch! ${this.count}`)
}
}
})
export default class Counter extends Vue {
count = 0
increment() {
this.count++
}
}
</script>
補足
デコレータとは
デコレータとはクラスの宣言などにアタッチできる特別な宣言です。(引用) qiita.com
