Vueのロードオーダーの操作方法

今回は、Vueのロードシーケンスの操作方法と、Vueのロードシーケンスを操作する際の注意事項について説明します。以下は実際のケースです。

Vuejs バージョン 1.0 では、親コンポーネントと子コンポーネントが連携する場合、そのライフ サイクル実行には次の特徴があります:

1. 創造は常に最初に父親から行われ、次に息子から行われます

作成されたライフサイクル関数は常に親から子の順序で実行されますが、兄弟はこの順序に厳密に従わないだけでなく、親への子コンポーネントの挿入順序も使用されると推定されます。コンポーネントもランダムであり、特定のパターンはありません。サブコンポーネントが次の順序で参照されると仮定します:

<p class="container">
 <child-c1 v-ref:child1></child-c1>
 <child-c2 v-ref:child2></child-c2>
</p>

$children 参照を使用してすべての子コンポーネントを取得する場合、次のように、「child-c1」が常に最初の位置にあるとは限りません。

2. Ready の順序はさらに混乱します

私の推定によると、親コンポーネントと子コンポーネントのreadyの順序は、コンポーネントが完全にロードされるように、最初に子、次に親である必要があります。ただし、実際の例から判断すると、readyには親コンポーネントの順序がまったくない場合があります。が最初にロードされ、場合によってはサブコンポーネントが最初にロードされるため、プログラミング

の実践では、それらのロード順序に依存してはなりません。

3. 結論

実際には、コンポーネントが順番にロードされるようにする必要がある場合、コンポーネントの存続順序や、親コンポーネントと子コンポーネントの準備完了ライフサイクルに依存してはなりません。

すべてのサブコンポーネントがロードされたかどうかを判断する方法

親子コンポーネントを一緒に使用する場合、特に構成情報がビジネス情報から分離されている場合、多くの場合、すべての子コンポーネントがロードされた後に、親コンポーネントの関連サービスを実行する必要があります。次のコンポーネント構造を例に挙げます。 上記の例では、サブコンポーネントの構成情報を結合する必要があるため、すべてのサブコンポーネントがロードされた場合にのみ、結合された構成情報が正確かつ完全になります。

したがって、マウントされたイベント (1.0 の ready イベント) を直接使用すると、間違いなく間違った結果が得られます。この問題を解決するには、次のデータ構造とメソッドを作成することをお勧めします。 構成項目「colSize」を設定し、サブコンポーネントによって呼び出されるメソッド「addColModel」を確認することで、すべてのサブコンポーネントがロードされる瞬間を判断できます（この時点で親コンポーネントがロードされる場合とロードされない場合があります）。必要な設定を行う 情報の並べ替え作業。

ただし、実際のアプリケーションでは、サブコンポーネントの数が多い場合、ロード順序が構成順序と一致していることを確認したい場合、別の現象が発生することがわかりました。 、次のように「order」

属性

を追加できます。最新の構成内容は次のとおりです:

 // 大多数时候判断会失败
 if(this.$children[0] === this.$refs.child1) {
  // 这里的代码很可能得不到执行机会
 }

このような処理の後、次のように、ロードされた後にすべてのサブコンポーネントを並べ替えることができます:

 <jq-grid :url="url" col-size="5" :sub-grid="true" ref="accountGrid" :on-ready="initGrid" :query="queryParams">
 <jq-col label="账号" name="username" width="75" :sortable="true"></jq-col>
 <jq-col label="用户名称" name="remarkName" width="75" :sortable="true"></jq-col>
 <jq-col label="创建时间" name="createTime" width="90">
 </jq-col>
</jq-grid>

この記事の事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングな内容については、他の関連記事に注目してください。 PHP中国語ウェブサイトです！

推奨読書:

JS 現在の地理的位置のケースの詳細な説明を取得します

parabola.js は放物線を実装し、ショッピング カート機能に追加します

以上がVueのロードオーダーの操作方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。