Vue のロード順序の例についてのディスカッション-jsチュートリアル-php.cn

Vue のロード順序の例についてのディスカッション

小云云

リリース： 2018-01-22 09:53:08

オリジナル

1693 人が閲覧しました

この記事では主に 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」が常に最初の位置にあるとは限りません。混乱

私の推測によると、親コンポーネントと子コンポーネントの準備完了順序は、コンポーネントが完全にロードされるように、最初に子、次に親になるはずですが、実際の例から判断すると、ready には何もありません。親コンポーネントが最初にロードされる場合もあるため、プログラミングの実践では、それらのロード順序に依存しないでください。

3. 結論

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

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

親子コンポーネントを一緒に使用する場合、特に構成情報が業務情報と分離されている場合、すべてのサブコンポーネントがロードされた後に親コンポーネントを実行する必要があることがよくあります。

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

ログイン後にコピー

上の例では、サブコンポーネントの構成情報を結合する必要があるため、すべてのサブコンポーネントがロードされた場合にのみ、結合された構成情報が正確になります。完了。

そのため、マウントされたイベント (1.0 の ready イベント) を直接使用すると、間違いなく間違った結果が得られます。この問題を解決するには、次のデータ構造とメソッドを作成するとよいでしょう:

 <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>

ログイン後にコピー

設定項目 "colSize" サブコンポーネントによって呼び出されるメソッド "addColModel" をチェックすることで、すべてのサブコンポーネントがロードされる瞬間を判断できます (この時点で親コンポーネントがロードされる場合とロードされない場合があります)。これにより、必要な処理が実行されます。構成情報のソート操作。

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

props : {
 colSize : {
  type : Number,
  default : 1
 }
}

data () {
 return {
  // 用于获取所有的子组件配置信息
  colModel : [],
  readySize : 0
 }
},

methods : {
 /**
  * 由子组件在加载完成时调用
  */
 addColModel () {
   this.readySize ++
   // 检查进度是否设置的colSize一致
   if(this.readySize == this.colSize) {
   // 这时候所有的子组件已加载完成
   } 
 }
}

ログイン後にコピー

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

<jq-grid :url="url" col-size="8" :sub-grid="true" ref="hostGrid" :on-ready="initGrid" :query="queryParams">
 <jq-col order="1" label="名称" name="hostName" width="75" :sortable="true" ></jq-col>
 <jq-col order="2" label="主机型号" name="model" width="60" :sortable="true"></jq-col>
 <jq-col order="3" label="生产厂商" name="vendor" width="60" :sortable="true"></jq-col>
</jqgrid>

ログイン後にコピー

結論

By補助変数とメソッドを手動で追加すると、統合操作を実行するためにサブコンポーネントがロードされる瞬間を取得できます。