Vue3から推奨されるCompositionApiの書き方調べてみた

Vue3になってから色々使えなくなったものとか、使えるようになったものありますが、推奨される書き方がどうやらReactっぽい？感じという勉強がてらまとめてみたいと思います。
※Reactは触ったことないです。

Vue２から３になり色々と変わりましたね。
俗にいうOptionsApiとCompositionApiといわれるやつです。

どうやって書くのか、、僕もわかってないので調べてみました。
まずVue2のOptionsApiからおさらいしてみます。
記述方法として、data、methodsなどなど様々なオプションを指定してインスタンスを生成していきます。

一方CompositionApiではロジックごとに記述するらしい。
重要なのはsetup構文を使ってその中でロジックを書いていく。
注意すべきことはVueではなじみ深いbeforeCreateの前に実行されること。
まあ、頭の片隅に入れとくだけでよさそうですね。

実際どれだけ変わるんでしょうか。

// 従来のコード

<script lang="ts">
import Vue from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default Vue.extend({
  components: { HelloWorld },
  data() {
    return {
      userName: 'Tarou'
    }
  },
  methods: {
    sayHello() {
      alert(`Hello ${this.userName}`)
    }
  }
})
</script>

// Vue3のコード

<script lang="ts">
import { defineComponent, ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  components: { HelloWorld },
  setup() {
    const userName = ref('Tarou')
    const sayHello = () => {
      alert(`Hello ${userName.value}`)
    }
    return { userName, sayHello }
  }
})
</script>

機能ごとにまとまってて見やすくはなってますね。
ただ、今までの記述で慣れていると変数宣言とかの場所探しとかは難儀しそうな印象でした。

ただVScodeでプラグインが結構あるらしく保管とかも優秀らしいのでその辺ですぐに慣れそうな感じはありますね。

今回はさわりの部分だけなので、会社で導入される前にもっと勉強しておきたい。