Vueのプラグインの仕組みとインストールの詳細を深く理解する

序文：

Vue を使用する場合、多くの場合、カスタムプラグインをいくつか使用して記述し、 Vue.useを使用してそれらを導入します。したがって、プラグインを作成する場合、 install方法が重要になります。 Vue.jsプラグインは ` installメソッドを公開する必要があります。このメソッドの最初の引数は Vue コンストラクターであり、2 番目の引数はオプションのオプションオブジェクトです。これは Vue プラグインのVue公式仕様です。では、このinstall関数とは一体何なのか、 Vue内部処理にこの関数をどのように使用し、どのように呼び出されるのか。今日はソースコードレベルからわかりやすく説明します。

この記事を読むと、次のことが分かります。

install機能でできること
install内部的にどのように実装されていますか?
VuexとVue-Routerプラグインはインストール中に具体的に何を行いますか?

さて、これ以上何も言わずに、始めましょう！！！

1. Vuex&Vue-Routerでのインストール処理

ここに、皆さんに考えてほしい 2 つの質問があります。穴を掘るようなものです。以下で 1 つずつ答えていきます。

プロジェクト内で$router $store直接使用して値やいくつかのメソッドを取得できるのはなぜですか?
なぜこれら 2 つのプラグインは最初にVue.useを使用して導入されるのでしょうか?次にインスタンスを作成し、それを Vue インスタンスに渡します。

実際、両者の原理は同じです。ここでは例としてVue-Routerを使用します。まず、内部インストールの具体的な実装を見てみましょう。

クラスルーター{
    コンストラクタ(オプション) {
        ...
    }
}

Router.install = function(_Vue) {

    _Vue.mixin({
        作成前() {
            if (this.$options.router) {
                _Vue.prototype.$router = this.$options.router
            }
        }
    })

}

デフォルトルーターをエクスポートします。

_Vue.mixinグローバルミックスインとは何ですか?これは、このメソッドをすべてのコンポーネントに混合することと同じです。
beforeCreateは何ですか？もちろん、これはcreateの前に実行される Vue のライフサイクルです。

この場合は、大胆な判断をしてみましょう。 Vue-Router実際には install 関数でグローバルミックスインを使用し、 beforeCreateライフサイクルがトリガーされたときにthis.$options.routerを Vue プロトタイプにマウントします。これにより、 this.$routerを使用してrouterインスタンスを呼び出すことができます。クラスメイト: ちょっと待って、やめて! ！！まさにシスター・リーらしいですね。しかし、 this.$options.routerとは何ですか。どこから来たのですか。

心配しないでください。最初の問題は解決したので、今度は 2 番目の穴を埋めましょう。

通常はVue-Routerを使用します。エントリファイルを定義する Vue インスタンスはおそらく次のようになります。

// ルーター/index.js
'vue-router' という形式で VueRouter をインポートします。
'vue' から Vue をインポートします。

Vue.use(VueRouter);

定数_router = [
    ...
]

定数 Router = new VueRouter(_router);

デフォルトルーターをエクスポートします。

// メイン.js
'vue' から Vue をインポートします。
'router' から router をインポートします。

新しいVue({
    ルーター、
    ...
}).$mount('#app');

最初の例を組み合わせて、まず分析してみましょう。

Vue.use() は主にプラグイン内のinstallメソッドを呼び出し、 Vueインスタンスをパラメーターとして渡します。
上記ではthis.$options.routerが使用されており、 options通常、設定項目を表します。
main.jsでは、Routerインスタンスを構成項目としてVueインスタンスに渡します。

噛む！！！要素が検出されましたので、大胆に推測してみましょう。 Vue-Router 、まずグローバルミックスインuse 、 Vueルートインスタンス構成項目内のrouterインスタンスを取得し、適切なタイミングでマウントを実行します。そして、 new Vue()ルートインスタンスが作成されると、 routerインスタンスが注入され、その後、グローバルミックスイン内のライフサイクルがトリガーされます。このとき、ルートインスタンスの設定項目this.$optionsにはすでにrouterインスタンスが含まれており、ようやくマウント処理が完了します。！！このコードのセクションだけでも、論理的に厳密であり、プログラミングのアイデアも非常に巧妙なので、専門家と呼ぶにふさわしいものです。兄弟たち、パブリックスクリーンに「インサイダー」という単語を入力してください、うーん。

2. Vueでのインストールの内部実装

よく使われるライブラリinstallの使い方を読んで、何か得られたものはあったでしょうか。ウォームアップの後は、ソースコードからinstallの内部実装を調べ始めることができます。

エクスポート関数 initUse (Vue: GlobalAPI) {
    // インスタンスにマウントされたuseメソッドを登録する Vue.use = function (plugin: Function | Object) {
        // 現在のプラグインの配列を初期化します const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
        // このプラグインがすでに登録されている場合は処理しません if (installedPlugins.indexOf(plugin) > -1) {

            これを返す

        }

        ...
        
        // ここがポイントです! ！ ！
        if (typeof plugin.install === 'function') {
        // install がプラグイン内の関数である場合、install メソッドを呼び出し、プラグインを指定して、いくつかのパラメータを plugin.install.apply(plugin, args) に渡します。

        } そうでない場合 (typeof plugin === 'function') {
        // プラグイン自体が関数である場合は、それをインストールメソッドとして扱い、プラグインを指し示し、一連のパラメータを plugin.apply(null, args) に渡します。

        }
        
        //プラグインをプラグイン配列に入れるinstalledPlugins.push(plugin)

        これを返す
    }
}

ソースコードのこの部分は非常に簡潔で、読みやすいです。つまり、使用時にプラグインの種類を判別し、プラグイン自体のinstallを実行します。実際、公式サイトの説明を詳しく説明すると、 Classプラグインにはインストールメソッドが公開されているはずです。

結論：

Vue のプラグインの仕組みについて、より深く理解できたでしょうか?実際、プラグインを開発するときに、 installを使用して他の多くのことを実行できます。たとえば、 Vue-Router実際にはインストール時にRouter-viewとRouter-linkのグローバルコンポーネントを登録します。

Vue のプラグインの仕組みとinstallについての詳しい解説はこれで終わりです。Vue のプラグインの仕組みとインストールについてのより詳しい解説は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。