Vue3コンポーネントの実装のしやすさについて Vision.1

Vue3のコンポーネントの実装について、
Vue2は業務経験があるものの、Vue3は初心者である筆者からの視点で考察します。

Vue3はその直感的なAPIと柔軟性により、初心者でも簡単に取り組むことができる
という噂ですが、その真偽の程を確認できればと思っています。
一旦、細かく分けて記事を作成しますが、後程、編纂するか、
参考コードを入れたりして、分量調節します。

今回はVue3コンポーネントの概略から、
単一ファイルコンポーネントと子コンポーネントを以下にまとめます。

Vue3のコンポーネントの基礎1

公式ページ：コンポーネントの基礎を読み進めながら、以下のように解釈。

単一ファイルコンポーネント(略：SFC): .vueファイルで書かれ、
HTML、JavaScript、CSSが1つのファイルにまとめられています。
Vue CLIやNuxt.jsなどのビルドツールと
組み合わせて使用します。
一元管理できる点は魅力的ですが、ファイルサイズが大きくなると
結局分割したくなりそうです。
子コンポーネント: 親コンポーネントの冒頭で以下のようにimportすると
子コンポーネントが使用可能になります。

parent.vue

<script setup>
import ChildComponent from './ChildComponent.vue'
</script>

importすることで、親コンポーネント中で何度でも子コンポーネントを呼び出せます。
子コンポーネントにJavascriptで色々書いていると重複してイベントが発火するのか、
気になりました。

parent.vue

<template>
  ・・・親コンポーネントの実装1
  <ChildComponent />
  ・・・親コンポーネントの実装2
  <ChildComponent />
  ・・・親コンポーネントの実装3
  <ChildComponent />
  ・・・
</template>

子コンポーネント(HelloWorld.vue)を4回呼び出します。

実験用にscript setupにalertを仕込みます。

気になった通り、4回alertが出ました。
別にこの動作自体は、Vue2で実装しても同じだったと思いますが、

この動作には注意が必要で、業務で設計→実装する場合は、
UI用のコンポーネント設計書から、ちゃんと整備しておかないと、
共通コンポーネントとして実装した部品を、複数回呼び出してしまって、
初期化処理で事故る原因になりそうです。

親コンポーネント側で、自然に子コンポーネントが呼び出せている点も確認できています。

次回：propsの受け渡しとイベントの購読について