【TS】クラスメソッドにアロー関数使ったら
副題「Vue3×TSのクラス内でアロー関数使ったらリアクティビティが消えた話」
要約
タイトルの通りです。クラスメソッドの定義ではアロー関数を使用しないようにしましょう。特にVueでは。
そもそもコンストラクタが通常関数の形式なのにアロー関数にするのは頭おかしかったかもしれない。
今回は大したことない記事でごめんなさい。
はじめに
前回の「Vue3でTS使ってもクラスなんか使うなよ、という話」めちゃくちゃたくさんの方に閲覧いただきまして嬉しいやら緊張するやらでございます。皆様ありがとうございます。
さて、上記事はVue3のクラスのリアクティビティに関するものでして、よし、これでマスターしたぞ！と思っていたのですが、思う通りの動作をしない箇所があり、やべ...嘘記事書いてしまったか？？と冷や汗をかいておりましたが
どうやらクラスメソッドをアロー関数で書いていたことが問題だったようです
Composition APIとアロー関数
さて、Vue3からメインがOptions APIからComposition APIになりまして、アロー関数解禁！、となったようですね
thisを使わなくなってアロー関数でも問題が無くなりました。
そもそも
クラスメソッドの定義にアロー関数を使用している例は見たことないのに何故アロー関数で書いたのでしょうか...
そもそも、アロー関数で書くとメソッドではなくプロパティになるようです。
うーん、わからん
アロー関数教
なーんでアロー関数書くのかという話ですけども、5年前くらいでしょうか、一時期変数宣言にvarを使うな！let、constを使え！関数はfunction使うな！
みたいに言われていましたよねえ。当時の私は、なるほどーfunctionは時代遅れなんだな、と思ったわけです。アロー関数教に入信してしまっていました。
今では割とそんなことないみたいですけど
それでも
ここでの問題は、アロー関数で書いても基本的な動作は問題ないということです。
ただリアクティビティが想定通りになりません。
あと、refで定義したプロパティについては問題ないとか、副次的な様々な要因が割と複雑になっている気がします。
原因は究明していない
めんど臭そうなので原因は究明していません。どなたかよろしければお願いいたします（丸投げ）。
以下のところに原因がある気はしますが...
- そもそもクラスメソッドをアロー関数で宣言することが想定外
- メソッドではなくプロパティになっている
- Composition APIで出番のなくなったthisをクラス故に使用する
アロー関数教の方のお役に立てば...
Discussion