Vue 2(vue.jsのバージョン2)で作成したコードをVue 3(バージョン3)の新機能であるVue Composition APIを使用した方法に書き換えを行うことでVue Composition APIの記述方法を確認していきます。 書き換えに利用するのは頻繁にプログラミングの例で活用されるTodoリストアプリケーションです。身近で馴染みのあるコードを利用することでComposition APIではどのような書き換えが必要なのかを短時間で理解することができます。 Vue 3はまだリリースされていないためVue 2のComposition APIを追加でインストールします。またVue 3でもこれまでのようにCompositon APIを利用しない記述も可能です。これまでの記述方法をoptions(API or based)と呼んでいます。2020年8月ではVue CLIをバージョンア
Vue.jsを使った開発でよく悩まされるのがコンポーネントの肥大化です。複雑なアプリケーションになると、1つのコンポーネントが<script>ブロックだけで数百行…なんてこともめずらしくないでしょう。従来、Vue 2までの標準的な書き方では、UIとしてのコンポーネントの細分化はできてもロジックの分割や整理には限界がありました。しかし、Vue 3のComposition APIを活用すると、はるかに柔軟な整理・分割が可能です。 「Composition APIは難しそうだからまだ使っていない」という方、あるいは「導入はしているけどイマイチメリットがわからない」という方は、この機会にぜひComposition APIを活用したコンポーネントの整理術を試してみてはいかがでしょうか？ なぜ、Vueのコンポーネントは肥大化するのか？ 簡単な例を見てみましょう。下のサンプルはミニマムなアナログ時計のコ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
