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

この記事では、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('global-component', Vue.extend(baseOptions));
//传入一个选项对象（自动调用 Vue.extend）,等价于上行代码.
Vue.component('global-component', baseOptions);
// 获取注册的组件（始终返回构造器）
var MyComponent = Vue.component('my-component')

他のページで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('onCreated-2');
 }
 //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

mixins

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

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

extends

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

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

new Vue({
 extends: baseOptions,
 created(){
  //do something
  console.log('onCreated-2');
 }
 //其他自定义逻辑
});
// -> 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は再利用のためにコンポーネントコンストラクターを作成します

• ミックスインと拡張のために拡張します

• 上記は私がしたものです将来的に皆さんのお役に立てば幸いです。
  関連記事:

• axiosを使ってプログレスバー機能付きで写真をアップロードする方法

JavaScriptでJSONデータのグループ化最適化を実装する方法

vue でのこのポインティングの問題について (詳細なチュートリアル)

以上がVue の拡張とコンポーネントの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。