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

ホームページ

ウェブフロントエンド

Vue.js

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

青灯夜游

Oct 26, 2020 pm 05:50 PM

vue.js

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

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

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

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

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

グローバルメソッドまたは属性の追加。例: vue-custom-element
グローバルリソースを追加します: ディレクティブ/フィルター/トランジション/コンポーネントなど。たとえば、vue-touch
は、グローバルミキシングを通じていくつかのコンポーネントオプションを追加します。たとえば、vue-router
は、Vue インスタンスメソッドを Vue.prototype に追加します。
上記の関数を 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(&#39;my-directive&#39;, {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
  // 5. 注册全局组件
  Vue.component(&#39;myButton&#39;,{
    // ...组件选项
  })
}

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 || &#39;&#39;,
    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 !== &#39;undefined&#39; && window.Vue) {
  install(window.Vue);
}
export default {
  version: &#39;2.13.0&#39;,
  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: &#39;2.13.0&#39;,
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination,
  Dialog,
  Autocomplete,
  // ...other components
};

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

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

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

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

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

##プラグインが登録されていない場合、正常に登録された後、値