Vue3 Composition API
>「”なぜ” Composition APIを使うのか」
> 複雑に肥大化したコンポーネントを、小分けにして関心事で分別し、クリーンな状態に整理するためです。
>これまでのVue2.xでは、「複数のコンポーネント間でロジックを抽出して再利用するためのクリーンでコストのかからないメカニズム」が欠如していました。
>これを解決するのが、Composition APIです。
> Composition APIによって、コンポーネントのコードを整理する際に、開発者により高い柔軟性を提供します。
> コンポーネント間で、ロジックや状態を抽出して再利用することが、簡単になります。
> SFCに記述するのはViewの見た目に関することだけにして、ロジックや状態を外部に切り出せるようになるのです。
コンポーネント間でロジックを抽出して再利用できるようになる
ロジックを抽出することで、単体テストが実行しやすくなる
>つまり、Composition APIは、肥大化したコンポーネントを小さく切り刻むための聖剣なのです。
肥大化したコンポーネントを小さく分割するための剣
小さいコンポーネントで無理に使う必要はないし、使うと複雑になる
setup 関数が肝
setup()では、thisが参照できない
ref()関数を使って reactiveにする
ref()とreactive()の違いはややこしいので注意。
mounted や computed などを setup でまとめることができる
>みなさんは、VueのProviderパターン(provide/inject)って使ったことありますか?
composition api を使ってコンポーネントから状態とロジックを抽出したとして、どうやって状態を共有するのか？の解決策
>Composition APIで「状態とロジックを切り出して」Providerで「運ぶ」って感じです。
provide とkeyを指定して、子孫たちに状態を提供する
受信側は inject で受け取る
Vue.js2系からある機能なので、3系から変わる可能性あり
> Composition APIを使って、散らかった部屋の荷物をダンボールに梱包して、外に出そう。
> Composition APIを使って梱包した荷物を運ぶのがProviderの役目
> Providerで、親コンポーネントから子コンポーネントに共通の状態を簡単に受け渡すことができる。
> Prop渡しと違ってバケツリレーをする必要がない。
> 今後、Vue3ではProviderの改善が進むと予想