2020-01-29 (Update: 2020-12-07)

Vue.js の event bus (あるいは event hub) 、非推奨になっていた¶

気づいたらドキュメントからいなくなっていた。

注釈

Vue.js v2.x 時点での記事です。

event bus (あるいは event hub) とは¶

親子関係にないコンポーネント間でやり取りするための手段として Vue.js の公式ドキュメントに載っていた方法です。

具体的には、 $emit, $on でイベントをやり取りする用の vue インスタンスを作成するというシンプルなもので、ざっくりとしたコード例は以下のようになります。

const bus = new Vue();

// on ComponentA
bus.$emit('some-event-occurred', data);

// on ComponentB
bus.$on('some-event-occurred', handler);

消えた記載¶

私は数年前に Vue.js で簡単なアプリを作成していたくらいで、最近また触りだしたところでした。 1

event bus の存在はおぼろげながら記憶していたので日本語のVue.jsドキュメントを確認したのですが、検索欄に bus と入力しても出てきません。

Googleで外部サイトを検索すると event bus の紹介記事は出てくる＆その記事にあるドキュメントのリンクはコンポーネントの基本ページを指しているので、公式のドキュメントから記載が消えていると予想できます。

こうなるとなんで消えたが気になってくるので、調べました。

調査¶

調査1: ドキュメントのGithubリポジトリで検索する¶

日本語のドキュメントページは英語ページを元に有志の方が翻訳したものなので、英語のドキュメントの Github リポジトリで bus と検索してみます。

https://github.com/vuejs/vuejs.org/search?q=bus

検索結果の Code、Issue から、

https://vuejs.org/v2/style-guide/#Non-flux-state-management-use-with-caution のページで「グローバルな状態の管理はイベントバスより Vuex を使った方が良い」ということが書いてあることがわかります。

また、上記のページの global event bus というリンクの先にイベントバス自体の説明（およびここでも Vuex 使った方が良いという説明）があるのがわかります。

# なおこのページでは event hub という書き方をしている

この時点で非推奨だから「コンポーネントの基本」ページから消したのかな？という予想は立ちますが、そのような議論をした Issue は見つかりませんでした。せっかくなのでどのコミットで消えたのか掘り下げてみます。

調査2: リポジトリを clone してログを追う¶

コードが追加・変更されたタイミングは git blame を使えばわかるのですが、削除の場合は git log -S を使います

man git-log
  ...
  -S<string>
    Look for differences that change the number of occurrences of the specified string (i.e. addition/deletion) in a file.
    Intended for the scripter's use.

    It is useful when you're looking for an exact block of code (like a struct), and want to know the history of that block
    since it first came into being: use the feature iteratively to feed the interesting block in the preimage back into -S, and
    keep going until you get the very first version of the block.

# ファイルorディレクトリが分かっている場合は指定できる
git log -p -Sbus -- src/v2/guide/components.md

この結果 commit:5adbc5f902a3562a3e233c06f99f9be30254741a (2018.03) で削除されているのがわかります。

Github ではコミットログに対してコメントをつけることができるのですが、このコミットのコメントに理由が書いてありました。

https://github.com/vuejs/vuejs.org/commit/5adbc5f902a3562a3e233c06f99f9be30254741a#r29139254

雑に翻訳すると

event bus はどのようなユースケースであっても推奨できない手法なので削除した。
event bus は使っているうちに(複雑化して?)辛くなってきて、
辛くなった後ではリファクタリングするのも困難になる。

ということのようです。

まとめ¶

公式には(2018年以降) event bus の利用は非推奨で、グローバルな状態管理には Vuex を使いましょうということで良いと思います。

例えばログインユーザのセッションなどはグローバルな状態だと思われるので、基本的には SPA を Vue で作るなら Vuex を利用することになると思います。

私見¶

Vue.js 自体が「プログレッシブフレームワーク（他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されている）」なので、最初はシンプルに始める ==> シンプルな event bus を使う。という理屈は成り立つと思います。個人的にもシンプルを好みますし。

まぁただ選択肢が多いと今後の Vue本体の機能拡張・ドキュメンテーション・サポートも大変になるので、そういう理由での削除という面もあるのかなと思います。

Q. event bus で XXX するにはどうしたらいい？
A. Vuex 使ってください

というやり取りが多すぎたとか（フォーラム等確認していないので推測ですが）

ちなみに v2.x では $emit, $on が使えなくなった訳ではないので、 event bus も使えなくなった訳ではありません。オススメできないだけです ( deprecated でなく、 not recommended )。

Updated on 2020-12-07

v2.x では not recommended だったわけですが、 2020年9月にリリースされた Vue.js v3.0.0 にて $on, $off が削除されたため、 event bus は Vue 単体では使えなくなりました。詳細は下記。

https://v3.vuejs.org/guide/migration/events-api.html#overview

Footnotes

1: # 時代は Vue から Nuxt.js に移っている？様ですが、SSRしないなら Vue で良いんですかね？？何れにせよ Vue やってから考えようと思ってますが

JavaScript Vue.js JavaScript ドキュメンテーション

Comments

[ポエム] 世の中にクソコードが蔓延しているのは CTO が不在だから

iOSアプリで Firebase/Auth によるツイッターログイン

Vue.js の event bus (あるいは event hub) 、非推奨になっていた¶

event bus (あるいは event hub) とは¶

消えた記載¶

調査¶

調査1: ドキュメントのGithubリポジトリで検索する¶

調査2: リポジトリを clone してログを追う¶

まとめ¶

私見¶

Comments

Recommends