双方向データバインディングにどう慣れればいいのか

Vueのコンポーネントに手を入れるときに.syncを外すということがあった。

.syncは、propsとして渡した値を親が監視し、子のupdate:prop-nameのemitによって@update:prop-name="propName = $event"するという一連の状態を糖衣構文的に書けるもの。

カスタムイベント — Vue.js

ただ、子で値を更新した際(emit('update:prop-name', propName))に、親でpropName = $event以外のことをしたい状態になると.syncは使えなくて、@update:prop-name="func()"みたいな感じでイベントハンドラで呼ばれる関数を定義して渡すことになる。

僕はこの.syncの分解がすごく苦手だということが分かった。

親 <=> 子だけならまだいいんだけど、子から新しいコンポーネント(孫)を切り出すみたいなことをするときに頭がこんがらがった。

親 <=> 子 <=> 孫で子を経由したデータのやり取りは、上から下に流れるデータはpropsをそのまま渡し、下から上に渡すときはemitを呼ぶ関数を経由する。

ここで.syncを解体してプロパティごとにやりたいこを整理して……という感じで、どうもこんがらがってしまう。

emitを使わずに関数をpropsで渡す方法にするともう少し軽減されるかもしれない。

書くことすらうまくまとめられなかったけど、ここらへんの理解が浅いというだけです。

computedのgetter/setter

computedにはgetterとsetterが書けるんだけどあんまりその記事を見ない。

Vueのcomputedプロパティのgetterの役割について

こういうの。

getでprop.nameを返し、setでemit('update:name')を実行するみたいなやつをよく見かける。

まあ実装としては問題ないんだと思うんだけど、getter/setterという感覚ではおおよそなくて、どちらも色々な処理が書けてしまう。

computedは算出プロパティという名前なので、プロパティを算出して格納するイメージ。

たぶんgetter/setterに色々書けてしまうことも自分的には頭がこんがらがる要因の一つになっているのかもしれないとふと思った。