<script setup>が何かという話は、以下の記事でまとめてくれている方がいましたので、ご覧ください。
『今Vue3やるなら＜script setup>を使おう』
（まだ軽く使っただけの感想なので、何か誤っていたり、後で意見が変わって平然と<script setup>を使い出すかもしれませんがご容赦承ください）
理由1: Viewに公開したい変数とそうでない変数を明示的に区別できない
setup関数:
<script>
export default {
setup () {
const number1 = ref(..)
const number2 = ref(..)
const result = computed(() => number1.value + number2.value)
return {
result
}
}
}
</script>
// View内ではresultだけが使える
<script setup>:
<script setup>
const number1 = ref(..)
const number2 = ref(..)
const result = computed(() => number1.value + number2.value)
</script>
// View内ではnumber1もnumber2もresultも使えてしまう
だから何が困るかって言われると特にないんですが、ちょっと落ち着かない。
理由2: 全ての処理がインスタンス生成のたびに実行されてしまう
そうなると、以下のように、アプリ全体で1つあればいいような定数や関数を定義することができません。
setup関数:
<script>
// export外は、インスタンスがいくつ増えても1度しか実行されない。
// なので、アプリ全体で1つしか生成されない変数や関数を定義できる。
const NUMBER1 = 1
const sum = (...numbers) => numbers.reduce((a, b) => a + b)
export default {
setup () {
const number2 = ref(..)
const result = computed(() => sum(NUMBER1, number2.value))
return {
result
}
}
}
</script>
<script setup>:
<script setup>
// インスタンス生成の度にscript内全体が実行される。
// ＝↓の変数/関数はアプリ内で1つあればいいのに、インスタンスの数だけ生成されてしまう。
const NUMBER1 = 1
const sum = (...numbers) => numbers.reduce((a, b) => a + b)
const number2 = ref(..)
const result = computed(() => sum(NUMBER1, number2.value))
</script>
共通化するだけなら、↓のように外部ファイルに置いてimportすればいいと思うんですが、
そのコンポーネントのSFCファイル内に置くのが整理の仕方として綺麗な場合も、この手段しかとれないのが辛いです。
<script setup>
// 例えば、NUMBER1は明らかにこのSFC内でしか使わないなら、わざわざ別ファイルに置きたくない。
import { NUMBER1 } from './constants'
import { sum } from './utils'
const number2 = ref(..)
const result = computed(() => sum(NUMBER1, number2.value))
</script>
追記
コメントで教えていただきましたが、<script>と併用することで理由2は解決できるようです！
<script>
// アプリ全体で一度だけ実行
const NUMBER1 = 1
const sum = (...numbers) => numbers.reduce((a, b) => a + b)
</script>
<script setup>
const number2 = ref(..)
const result = computed(() => {
return sum(NUMBER1, number2.value) // ＜script＞側の変数へのscopeを持つ
})
</script>