vue3.2のsetupについて

script setupの記述方法

vue3.2からsetupの書き方が変わりました。
具体的にはscript内にsetupを記述することにより以下の通りに。

今までのvue 3.0では

import { ref, onMounted } from 'vue';

export default {
  setup() {
    // データの定義
    const count = ref(0);

    // メソッドの定義
    const increment = () => {
      count.value++;
    };

    // ライフサイクルフックの利用
    onMounted(() => {
      console.log('コンポーネントがマウントされました');
    });

    // コンポジショナルな構文での記述
    return {
      count,
      increment
    };
  }
};

だったのが、vue3.2では

<script setup>  
  import { ref } from 'vue'

  const count = ref(0)

  const increment = () => {
    count.value++
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

と記述を直すことができるようになりexport default、setup, returnの
記述が不要になりました。