はじめに一度だけ実行したい

Composition APIを使って開発をするとき、はじめの一度だけ実行したい処理の記述方法をまとめていきます。 マウント直後に実行する ライフサイクルフック マウント直後に実行する はじめの一度だけ実行したい場合、DOMが作成されマウントされた直後に、処理を実行することで、はじめの一度だけ実行できます。 そして、Composition API では、onMountedを利用することで、マウント直後に実行する処理を記述することができます。 onMountedは、Compostion API の setup()内に記述します。 そして、onMountedには、実行したい関数を渡すことで、マウン…

Composition API ってどうやって使うの？

Vue 3 でComposition API が追加され、ロジック毎にまとめて記述できるようになりました。 そんな Composition API の基本的な使い方をまとめていきます。 HTML は <template>タグ内に記述 変数や関数を使う HTML は <template>タグ内に記述 まずは、HTMLの記述ですが、これはVue 2の時と変わらず、テンプレートを使用することができます。 <template></template>内に、HTMLをほぼ通常通り記述することができます。 Reactのように、JSX記法を新たに覚える必要はありません。 一般的なHTMLと、記述が異なる点もあ…

Vue 2 と Vue 3

Vue はバージョン3がリリースされていますが、Vue 2 もまだまだ使われているようです。 Vue CLI でプロジェクト作成時も、Vue のバージョンを2にするか3にするか、問われます。 Vue のバージョン3でどんな機能が追加されたのでしょうか。 バージョン3での変更点 Composition API Teleport バージョン3での変更点 Vueはバージョン2からバージョン3へのアップデートにより、新機能の追加、破壊的な変更がいくつも行われています。 注目すべき新機能の中に、Composition API や Teleport などがあります。 また、Global API も破壊的な…