LoginSignup
21
9

More than 1 year has passed since last update.

個人的にVue3の<script setup>に馴染めない理由

Last updated at Posted at 2022-01-05

<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>
21
9
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
9