俺がやらかしたVue mixinのアンチパターンから学ぶmixinの使い方と代替案

VueComponent間で再利用可能な部品を実装するための機能がmixinです。mixinを使った共通化の例はよく見かけますし、私もしばしばやってきました。ただ、どうも自分の実装方法だと後々不便になったり見通しが悪かったりと、使い勝手の悪いものになってしまうことが多かったです。 そこで今回は自分の過去の実装例を見返しながら、なぜ失敗したのか、mixinをどうを使うべきかについて、現時点の考えをまとめてみます。 この記事で紹介する失敗例は、私が携わったプロダクト開発においてデメリットの方が大きかった実装例です。 便宜上「アンチパターン」「失敗例」といった表現をしていますが、あくまで個人的にやりたくないパターン程度の意味合いです。 失敗例1. Template Methodパターンを意識したmixin 暗黙的挙動の危うさ OverrideではなくMergeしているだけ Classの継承とmi

[tohokuaiki]

おー、すげぇ参考になる。

[bapho]

“Vueなどのように知識が一般化されたフレームワークの暗黙的挙動ならまだしも、こういった「独自の暗黙的挙動」は負担になりやすい”

[peketamin]

“そもそも抽象Classを定義したりClass継承したりすることは「共通化」や「再利用」が目的ではありません”

[inouetakumon]

小さなmixinを書いていて、共通化に悩んでいたので参考になりました。

[l08084]

このサイトのおかげでなんで動かないのかわかった。Vue.jsのmixinのdataオプションって継承しているコンポーネント間で継承されないんだ.....