Vue の拡張とコンポーネントの違いは何ですか?-jsチュートリアル-php.cn

Vue の拡張とコンポーネントの違いは何ですか?

亚连

リリース： 2018-06-19 16:13:21

オリジナル

2859 人が閲覧しました

この記事では、Vue の extend、component、mixins、extensions の違いを主に紹介します。非常に優れているので、必要な方は参考にしてください

new Vue()、component

。まず、次のコードで使用されるオプションオブジェクトのbaseOptionsに同意しましょう。

let options = {
 template: &#39;<p>{{firstName}} {{lastName}} aka {{alias}}</p>&#39;,
 data: function () {
  return {
   firstName: &#39;Walter&#39;,
   lastName: &#39;White&#39;,
   alias: &#39;Heisenberg&#39;
  }
 },
 created(){
  console.log(&#39;onCreated-1&#39;);
 }
};

ログイン後にコピー

new Vue() source:vue/src/core/instance/index.js

コンポーネントをインスタンス化する.

new Vue(baseOptions);
// -> onCreated-1
component source:vue/src/core/global-api/assets.js

ログイン後にコピー

Vue.component グローバルコンポーネントを登録または取得するためのメソッドであり、その機能は、Vue.extend で生成された拡張インスタンスコンストラクターをコンポーネントとして登録（名前付け）することです。グローバルに登録されたコンポーネントは、すべての Vue インスタンスで使用できます。コンポーネント登録ステートメントよりも後で構築されます。

Vue.component(&#39;global-component&#39;, Vue.extend(baseOptions));
//传入一个选项对象（自动调用 Vue.extend）,等价于上行代码.
Vue.component(&#39;global-component&#39;, baseOptions);
// 获取注册的组件（始终返回构造器）
var MyComponent = Vue.component(&#39;my-component&#39;)

ログイン後にコピー

他のページでbaseOptionsを「拡張」または「混合」する必要がある場合、Vueはさまざまな実装メソッドを提供します:extend、mixins、extends.

ソース: vue/src/ core/global-api/extend.js

は、Vue コンストラクターを拡張して、事前定義されたオプションを持つ再利用可能なコンポーネントコンストラクターを作成できます。

let BaseComponent = Vue.extend(baseOptions);
//基于基础组件BaseComponent,再扩展新逻辑.
new BaseComponent({
 created(){
  //do something
  console.log(&#39;onCreated-2&#39;);
 }
 //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

ログイン後にコピー

mixins

mixins オプションは、ミックスオブジェクトの配列を受け入れます。これらのミックスインインスタンスオブジェクトには、通常のインスタンスオブジェクトと同様にオプションを含めることができ、それらは Vue.extend() の同じオプションを使用して論理的にマージされます。

new Vue({
 mixins: [baseOptions],
 created(){
  //do something
  console.log(&#39;onCreated-2&#39;);
 }
 //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

ログイン後にコピー

extends

これはミックスインに似ていますが、違いは、コンポーネント自体のオプションが拡張されるソースコンポーネントよりも優先されることです。

公式ドキュメントには、次のように書かれています。パラメータを受け入れる型のみが残り、

new Vue({
 extends: baseOptions,
 created(){
  //do something
  console.log(&#39;onCreated-2&#39;);
 }
 //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

ログイン後にコピー

結果から、3 つのメソッドは要件を達成できますが、形式は異なります

Vue。 . extend は、再利用可能なコンポーネントを作成するためのコンストラクターを作成するだけです
mixins、extends
ソースコードから、extend、extends、および mixins によって受け取られるオプションを拡張します。 3 つの方法は最終的に mergeOptions によってマージされます。違いは、公式ドキュメントに記載されている優先順位だけです。したがって、コンポーネントの機能の単純な拡張であれば、3 つの方法をすべて使用できます。
そして、これら 3 つの方法はシナリオで詳細な区別を使用していますが、現時点ではまだ混乱しています...

https://jsfiddle. ..

Option オブジェクトのマージ戦略 Vue.config.optionMergeStrategies

上記のオプションオブジェクトは、mergeOptions.

Print Vue.config.optionMergeStrategies の特定の戦略に従ってマージされます。デフォルトの optionMergeStrategies が次のように表示されます。 :

mergeHook

子コンポーネントと親コンポーネントのライフサイクルイベントが配列にマージされます。親コンポーネントが最初に来て、子コンポーネントが最後に来ます。

watch
子コンポーネントと親コンポーネントのウォッチャーは配列にマージされます。親コンポーネントが最初に来て、子コンポーネントが最後に来ます。
mergeAssets (フィルター、コンポーネント、ディレクティブ)
は、最初に子コンポーネント内で検索されます。そうでない場合は、プロトタイプチェーンを遡って、親コンポーネント内の対応する属性を見つけます。
データマージルール
重複した属性は保持されません
同名カバレッジ
データ内のオブジェクトにも同じルールがあり、重複した属性は保持されず、同じ名前カバレッジ
props、methods、computed: 重複した保持はなく、同じ名前のサブコンポーネントが親コンポーネントをカバーします
mergeAssets
mergeAssets マージメソッドでは、最初にプロトタイプデリゲートが使用されます。上で作成した新しいオブジェクトのプロトタイプチェーン内の親コンポーネントのプロパティを次に、新しいオブジェクト

オブジェクトで属性を検索するためのルールを拡張します。たとえば、obj[a] などの属性を検索する場合、obj が属性 a がない場合は、obj オブジェクトのプロトタイプで見つかります。まだ見つからない場合は、プロトタイプのプロトタイプを検索します。まだ見つからない場合は、未定義を返します。

function extend (to, _from) {
 for (var key in _from) {
 to[key] = _from[key];
 }
 return to
}
function mergeAssets (parentVal, childVal) {
 var res = Object.create(parentVal || null);
 return childVal
 ? extend(res, childVal)
 : res
}

ログイン後にコピー

概要

Vue.componentは便宜上グローバルコンポーネントを登録します

Vue.extendは再利用のためにコンポーネントコンストラクターを作成します