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); }

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 サイトの他の関連記事を参照してください。