Vue.useのソースコードを解析する

vue 開発の経験がある人は、vue.use に慣れているわけではありません。 vue-resource や vue-router などのグローバル コンポーネントを使用する場合、それらが機能するには Vue.use メソッドを通じて導入する必要があります。では、コンポーネントが導入される前に vue.use は正確に何を行うのでしょうか?

最初に vue.use のソース コードに移動します

Vue.use = function (plugin) {
    /* istanbul ignore if */
    if (plugin.installed) {
      return
    }
    // additional parameters
    var args = toArray(arguments, 1);
    args.unshift(this);
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args);
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args);
    }
    plugin.installed = true;
    return this
  };

Vue.use を通じてプラグインを導入するとします (プラグインは一時的に変数またはパラメーターとして理解できます)。つまり、Vue.use(plugin);

最初に、受信パラメータ プラグインにインストールされている属性が存在するかどうかを確認します。存在し、論理値が true の場合は、直接戻り、後続のコードは実行されません. この判決の役割は何ですか？それについては後で話します。

まず、インストールされているプラ​​グイン属性が存在しないか false であると仮定し、実行を続行します。

var args = toArray(arguments, 1)

toArray メソッドが実行され、toArray は 2 つのパラメータを受け取り、引数は Vue です。 Vue.use(a,b,c) などの .use メソッドによって渡されるパラメータのセットの場合、引数は [a,b,c] に似ています (注: 引数は単なる配列のようなものであり、実際の配列ではありません) )

ここではパラメータ プラグインを 1 つだけ紹介するため、引数は [plugin] と同様です。

toArray の機能は何ですか?ソースコードを見てください。

function toArray (list, start) {
  start = start || 0;
  var i = list.length - start;
  var ret = new Array(i);
  while (i--) {
    ret[i] = list[i + start];
  }
  return ret
}

toArray(arguments,1) を実行すると、長さ = argument.length-1 の新しい配列 ret が生成され、次に while ループが実行されて引数の要素が ret に逆に割り当てられます。 ret が引数よりも長いため、order は 1.

したがって、これは最終的には、最初の要素を除く残りの要素を ret に割り当てることと等価です。 toArray の主な機能は、配列メソッドを呼び出せるようにクラス配列を実数配列に変換することです。

ここではプラグイン パラメーターを 1 つだけ紹介しているため、arguments=[plugin] なので、toArray は空の配列 [] を返します。

次に args.unshift(this) を実行します。これは [].unshift(Vue) と同等、つまり args = [Vue];

次に

if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args);
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args);
    }

# を実行します。 ## ここで、プラグインのインストールが関数であるかどうかを判定します。関数である場合は、すぐに plugign.install メソッドが実行されます。install メソッドで渡されるパラメータは、args の配列要素、つまり最初のインストールで受け入れられるパラメータは Vue.

プラグインのインストールが関数ではない場合、プラグイン自体が関数であるかどうかを確認します。関数である場合は、プラグイン関数を実行します。パラメータは配列要素です引数で。

最後に、plugin.installed を true に設定します。 plugin.installed を true に設定するのは、同じプラグインが複数回インストールされるのを防ぐためです。たとえば、Vue.use (プラグイン) を一度実行すると、installed が true になり、再度実行すると戻ります。判断の第一歩へ。

要約すると、Vue.use の機能は、実際にはプラグイン関数を実行するか、プラグインの install メソッドを実行してプラグインを登録し、Vue オブジェクトを最初のパラメーターとしてプラグインまたはそのインストールに渡すことです。メソッド、使用 他のパラメータは、プラグインまたはインストールの他のパラメータとして使用されます。

簡単な例を挙げてください

import Vue from 'vue'
function test(a){
   console.log(a);//Vue
}
function test1(a,b){
　　console.log(a,b);//Vue hello
}
let oTest = {
   install：function(a,b){
      console.log(a,b);//Vue hello1
   }
}
Vue.use(test);
Vue.use(test1,'hello');
Vue.use(oTest,'hello1')
console.log(oTest);
//{
　　install:function(){...},
　　installed:true
}

関連する推奨事項:

2020 フロントエンド Vue インタビューの質問の概要 (回答付き)

vue チュートリアルの推奨事項: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識について詳しくは、こちらをご覧ください:

プログラミング入門! ！

以上がVue.useのソースコードを解析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。