Vueで「$」から始まる謎のモノに困惑した
チーム開発でVueを使っていると、突然$hoge(hogeは任意の文字列)とかいう変数や関数に遭遇することがある。
中途半端にVueを知っていると、
「知らない機能だな、$emit()みたいなやつかな？」
と思ってGoogle検索をするも、何も結果が得られない...
「じゃあ普通に関数とかかな？」
と思ってコード内を検索しても、定義箇所が見当たらない...
という状況に陥ることがある。
かなり困惑したので調べた。
$hogeとは？
Vueの場合、$hogeというのはすべてのコンポーネントからアクセスできるデータやメゾッドを示している可能性が高い。
もしファイル内で宣言もなく、importなどもなく突然利用されているなら、ほぼこれであると思って差し支えないだろう。
上記記事を読むと、
多くのコンポーネントで使用したいデータ/ユーティリティがあるかもしれませんが、グローバルスコープを汚染したくはありません。この場合は、プロトタイプに追加すれば全ての Vue インスタンスで使用できます。
Vueのプロトタイプに追加したプロパティは、すべてのVueインスタンスから参照できる ことと、
ここでは特別な事は一切起きていません。Vue は全てのインスタンスが利用できるプロパティに対して接頭辞に $ をつけるよう規約を設けています。この規約により、定義したデータ、算出プロパティ、またはメソッドとの衝突を回避できます。
Vueにおいて、すべてのインスタンスから使用できるプロパティの先頭には$をつける規約がある ことが分かる。
つまり、定義無しに利用できるのはVueアプリのどこかでプロトタイプのプロパティに追加されているからであり、$がついているのはそういう規約だからだと分かる。
これが分かると、
「当たり前のように使われてるのに宣言が存在しない…」
とか
「Google検索しても出てこない...」
といった状況にも合点がいく。
Discussion