NOTE 045 / 2019年
状態と処理を機能ごとに並べる
Vue 3 の書き方に移る前に、押さえておきたい考え方を整理します。
読了目安 約2分
Composition API では、状態と処理を機能ごとにまとめられます。テンプレートの都合で分かれていたコードを、意味のある単位で並べられるのが利点です。ただし、何でも一つの関数に詰めると、かえって読みにくくなります。
リアクティブな値と、ただの値の違いを意識します。画面に反映したい値だけをリアクティブにし、計算結果は computed に寄せると、更新の範囲が読みやすくなります。
押さえたい点
- 01機能ごとにまとめる
- 02リアクティブな値を絞る
- 03計算結果は computed に寄せる
参考資料
外部サイトが開きます。内容は各サイトの管理下にあります。
- Vue.js ガイド 外部サイトvuejs.org
- Vue.js API 外部サイトvuejs.org
- Vue のリアクティブ基礎 外部サイトvuejs.org
- Vue コンポーネント基礎 外部サイトvuejs.org
- Vue Transition 外部サイトvuejs.org
- TypeScript ドキュメント 外部サイトtypescriptlang.org
- TypeScript の設定 外部サイトtypescriptlang.org
- MDN Web Docs 外部サイトdeveloper.mozilla.org
- React リファレンス 外部サイトreact.dev
- web.dev 外部サイトweb.dev
- W3C WAI 外部サイトw3.org
- GitHub Docs 外部サイトdocs.github.com
- Chrome for Developers 外部サイトdeveloper.chrome.com