Vue3 + Typescriptでコンポーネントを作成する - フリーランス　技術調査ブログ

はじめに

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>