Count up sample on vue-class-component

この記事の目的

Vue CLI 3 では簡単に TypeScript でかけるようになりました。
vue-class-component を使うと、使わないときのコードと比べて、具体的にどのように変化するのかを、簡易なサンプルで見比べたいと思います。

つくるもの

クリックをするとカウントアップされるサンプルです。

Not use TypeScript

TS 使わない場合は、ふつうです。

App.vue

<template>
  <div id="app">
    <MyButton></MyButton>
  </div>
</template>

<script>
import MyButton from './components/MyButton.vue'

export default {
  name: 'app',
  components: {
    MyButton
  },
}
</script>

MyButton.vue

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="countUp">count up</button>
  </div>
</template>

<script>
export default {
  name: "MyButton",
  data: function () {
    return {
      count: 3
    }
  },
  methods: {
    countUp: function(){
      this.count++
    }
  }
};
</script>

Use vue-class-component

すこし、スッキリした気がします。...気のせいかもしれません。
（少なくとも MyButton.vue の export default 内はすっきりしました

App.vue

<template>
  <div id="app">
    <MyButton></MyButton>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import MyButton from './components/MyButton.vue';

@Component({
  components: {
    MyButton,
  },
})
export default class App extends Vue {}
</script>

MyButton.vue

<template>
  <div class="hello">
    <p>{{ count }}</p>
    <button @click='countUp'>count up</button>
  </div>
</template>

<script>
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class Mybutton extends Vue {
  count = 3
  countUp () {
    this.count++
  }
}
</script>

雑感

今ぼくは、TS を使って書くのか書かないのか迷っています。が、カジュアルなプロジェクトでの利用なので、積極的に使っていきたいところです。