続・Vue3でTS使ってもクラスなんか使うなよ、という話

前提：使わないほうが良いらしい

前回「Vue3でTS使ってもクラスなんか使うなよ、という話」という記事を書かせていただきました。
コメントで「Vue3でクラスは使わないほうが良い」というコメントを頂きまして、少なくとも公式は言及はしていないように思われますが、どうやらそうらしいです。
ま、タイトルにも「使うなよ」って書いておりますが

何故使わないほうが良いのか

とはいえ、初期値やディープコピーの関係、或いは好みや整理や互換性の問題から、クラスを使いたい！！という場合もあるかと思います。
今回は前回とは少し変わって、何故使うべきではないのか、或いはどうしても使いたい場合は何に気を付ければよいのか、そこをほぼ経験談のみでまとめてみようと思います。

つまり、問題にぶち当たるたびに徐々に追記していこうと思います。興味のある方はたまに覗いてみてください。

リアクティビティが複雑になる

クラスインスタンスのリアクティビティとクラス内部（プロパティ）のリアクティビティの二重構造でリアクティビティが複雑になります。

詳細は「Vue3でTS使ってもクラスなんか使うなよ、という話」に記載しております。

クラスメソッドにアロー関数が使えない

詳細は検証できておりませんが、クラスメソッドをアロー関数として記述した場合、関数中の操作がリアクティブな操作になりません。

「Options API」から「Compotision API」になってアロー関数が解放された、と思ったら、クラスなどで「this」が登場すると扱いが難しいようですね。

テンプレートでのメソッド呼び出しで「this」が「undefined」になる場合がある

具体的には以下のようになります。

<!--この場合、クラスメソッド内で「this」が「undefined」になる-->
<button @click="instance.classMethod">ボタン</button>

<!--こちらは正しく動作する-->
<button @click="instance.classMethod()">ボタン</button>

<!--こちらも当然問題ない-->
<button @click="execMethod">ボタン</button>

<script setup>
const execMethod = () => {
  instance.classMethod();
}
</script>

「Options API」から「Compotision API」になって「this」から解放された、と思ったら、クラスなどで「this」が登場すると扱いが難しいようですね（天丼）。

それと

そもそもWEB系で「クラス」というとスタイル（CSS）のクラスについての記事がずらっと並びます。この検索汚染をどうするか、情報を得ようにもクラスはGooglabilityに問題があります、、、