Vue.use とは何かについて簡単に説明します。

Vue.use とは一体何ですか? この記事では Vue.use について紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

プロジェクト開発に Vue を使用すると、非常にハイエンドに感じられる Vue.use を通じて多くのホイールが使用されていることがわかります。

しかし、Vue.use とは一体何なのでしょうか?何が起こるか見てみましょう。

実際、これらのホイールはプラグインと呼ばれることがあり、その機能範囲は厳密には制限されておらず、通常は次のタイプが含まれます:

1. グローバル メソッドまたは属性の追加。例: vue-custom-element
2. グローバル リソースを追加します: ディレクティブ/フィルター/トランジション/コンポーネントなど。たとえば、vue-touch
3. は、グローバル ミキシングを通じていくつかのコンポーネント オプションを追加します。たとえば、vue-router
4. は、Vue インスタンス メソッドを Vue.prototype に追加します。
5. 上記の関数を 1 つ以上提供しながら、独自の API を提供するライブラリ。たとえば、vue-router

規模の大小に関わらず、プラグインが実現したい機能は上記に過ぎません。ただし、これによって複雑なプラグインの作成が妨げられるわけではありませんが、ユーザーにはプラグイン内で何が行われているかに注意を払う必要のないシンプルな使用方法を提供したいと考えています。固定 Vue は、特に new Vue() の前にプラグインを使用するための使用メソッドを提供します。

公式に提供されているプラ​​グイン (vue-router、vuex など) であるか、サードパーティのプラグイン ( など) であるか。 ElementUI、ant) はすべてこの方式を採用していますが、プラグイン内の機能は異なります。もちろん、このようなプラグインは他にもたくさんあり、awesome-vue にはコミュニティによって提供されたプラグインとライブラリの大規模なコレクションがあります。

次に、この謎の use メソッドがどのように実装されるかを見てみましょう。

Vue.js プラグインは install メソッドを公開する必要があります。このメソッドの最初のパラメータは Vue コンストラクタで、2 番目のパラメータはプラグイン設定で渡すために使用されるオプションのオプション オブジェクトです:

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
  // 5. 注册全局组件
  Vue.component('myButton',{
    // ...组件选项
  })
}

Vue.use(MyPlugin,{
  // ...options
})

プラグインの内部上に示したように、実際には上記のことだけで、非常に単純です。次に、実際のケースを見てみましょう。 ElementUI:

const components = [ Pagination, Dialog, Autocomplete/* 此处由于篇幅省略若干个组件 */];
const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);
  // 注册全局组件
  components.forEach(component => {
    Vue.component(component.name, component);
  });
  Vue.use(InfiniteScroll);
  Vue.use(Loading.directive);
  // 添加实例方法
  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };
  // 添加实例方法
  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
export default {
  version: '2.13.0',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination,
  Dialog,
  Autocomplete,
  // ...other components
};

プラグインを自分で実装するのは、プラグインが公開されている限り非常に簡単であることが簡単にわかります。外の世界installメソッドで十分です。このメソッドは、Vue.useを使用するときに呼び出されます。したがって、実装するコンテンツを install 内に置くだけで済みます。この利点は、プラグインが最初に呼び出す必要があるメソッドが install にカプセル化されており、より効率的でスケーラブルであることです。

ここの install では実際にすべてのコンポーネントが紹介されていることに気づくかもしれません。大規模なプラグイン ライブラリであるため、パフォーマンス上の問題が発生する可能性があります。 ElementUI を使用したことのある学生は、オンデマンドの導入をサポートしていることを誰もが知っています。実際、いくつかのヒントは上記の例にあります。

const components = [ Pagination, Dialog, Autocomplete/* 此处由于篇幅省略若干个组件 */];
// ....省去中间内容
export default {
  version: '2.13.0',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination,
  Dialog,
  Autocomplete,
  // ...other components
};

ここでは、各コンポーネントが個別にエクスポートされ、各コンポーネント内で同様に公開されていますinstall各コンポーネントをアセンブルして、 Vue.useEach できるようにします。コンポーネントはオンデマンドで導入されます。

import Alert from './src/main';
/* istanbul ignore next */
Alert.install = function(Vue) {
  Vue.component(Alert.name, Alert);
};
export default Alert;

上記に加えて、注目に値する点がいくつかあります。

• プラグインがオブジェクトを渡すと、その install# が実行されます。 ## メソッドが関数の場合、それ自体が実行され、bind this は null であり、追加のパラメーター

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

# を渡します。 ##プラグインが登録されていない場合、正常に登録された後、値
true
• を持つ installed 属性がプラグインに追加されます。 Vue.use メソッドは、プラグインの installed 属性を内部的に検出して、プラグイン
Vue の繰り返しの登録を回避します。 .use

は実際には神秘的ではありません。内装は私たちが通常使用しているものと同じで、ただ高級なコートを着せただけです。開発中にこのメソッドを使用してみることもできます。これはシンプルなだけでなく強力でもあります。

関連する推奨事項:




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

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

プログラミング関連の知識の詳細については、

プログラミング入門

をご覧ください。 ！

以上がVue.use とは何かについて簡単に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。