Please enable JavaScript.
Coggle requires JavaScript to display documents.
composition api - Coggle Diagram
composition api
リアクティブ値の扱い
ref
プリミティブ型をリアクティブに
.valueで参照
型推論効く
reactive
.value不要で参照できる
オブジェクトをリアクティブに
型推論効く
reactive()内のプロパティをリアクティブにしたい場合はtoRefs()を使う
今の所どっちを使ったらいいかは決まってない
リアクティブとプレーンな変数との違いが分からない
変数名を〇〇Refにするとか
関数を細かく分けてスコープ小さく、視認する変数の数を抑える
TS使って型を利用
コード編成
OptionAPIに比べて、機能ごとに分割しやすい
dataとかmethodとかの各場所がきまってないので、強いルールがない
特定の機能ごとにデータ定義して使えば、まとまってわかりやすい
optionAPIではsetupt()を書く必要はなかった
しかしsetupには、全体のプログラムがどういう構成要素からなっているのかが視認しやすい
returnでは使うデータのみを返すし、各関数の依存関係（合成関数をつかったり）がわかりやすい
再利用しやすさ
定義した関数を別ファイルにしておけば、他コンポーネントとかで再利用しやすい
vueには他にも再利用する方法がある
ミックスインとかHOCとかレンダーレスコンポーネントとか
compositionでの関数再利用のメリット
ミックスインみたいに、プロパティ名、メソッド名の衝突がない
importした関数を自分で名前つけられるから
コンポーネントインスタンスではないので、HOCとかレンダーレスコンポーネントみたいに、なぞなコンポーネントにならない。
合成関数となる
合成関数とは
useCounterとかuseSearcherのように、機能を定義した関数
OptionAPIと一緒に使用できる