Vue.js のプラグインを書く時の、prototype 「あり」と「なし」の違い

Vue プラグインのいくつかの書き方について整理しています。
この記事ではメソッドの影響範囲についてのみ言及します。

Vue プラグインを書く時には install メソッドを公開し、その中で、グローバル・アセットを追加したり、グローバル・ミックスインによりコンポーネントオプションを追加したりもできますが、その点については触れません。

インスタンスメソッド

prototype を使う場合のメソッドを、インスタンスメソッドと言います。

import Vue from "vue";

Vue.prototype.$myMethod = () => {
  console.log("$myMethod");
};

/* eslint-disable no-new */
const vm = new Vue();

vm.$myMethod(); // "$myMethod"
Vue.$myMethod(); // Error

インスタンスメソッドは、プロトタイプチェーンされるので、子コンポーネント内で this.$myMethod() を使用できます。Vue インスタンスの作成前（beforeCreate）でも使用できます。

また、全てのインスタンスが利用できるプロパティは $ で始まるように書くのが推奨されています。詳しくはこちら Vue Cookbook の Adding Instance Properties を参照してください。

Vueグローバルメソッド

prototype を使わない次のようなメソッドを、グローバルメソッドと言います。

Vue.myGlobalMethod = () => {
  console.log('myGlobalMethod')
}

Vue は new キーワードを使って Vue インスタンスを生成します。生成された Vue インスタンスでは、グローバルメソッドを使うことができません。もちろん、Vue が提供してくれるグローバルメソッドも同様です。

import Vue from "vue";

Vue.aaa = "aaa";

/* eslint-disable no-new */
const vm = new Vue();

console.log(Vue.aaa); // "aaa" 
console.log(vm.aaa); // undefined
console.log(Vue.version); // 2.5.21
console.log(vm.version); // undefined

グローバルメソッドを書く際には、既存のVueグローバルメソッドと衝突しないように注意です。また、グローバルメソッドは、静的メソッド（スタティックメソッド）とも言われるようです。

まとめ

独自プラグインを作成する時に、インスタンスメソッドと、グローバルメソッドの違いを理解した上で install を書かないと、うまく動かないので注意が必要です。

参照