Discussion sur les exemples d'ordre de chargement de Vue

Cet article présente principalement la discussion sur l'ordre de chargement de Vue, présentant l'ordre de chargement en détail et comment juger que tous les sous-composants sont chargés. L’éditeur le trouve plutôt bien, alors j’aimerais le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Dans Vuejs version 1.0, si les composants parent et enfant coopèrent, leur exécution de cycle de vie présente les caractéristiques suivantes :

1 Créé est toujours créé en premier, puis le parent

<.>La fonction de cycle de vie créée est toujours exécutée dans l'ordre du parent à l'enfant, mais les frères ne suivent pas strictement cet ordre. On estime qu'une fonction asynchrone est utilisée. Non seulement cela, l'ordre d'insertion des composants enfants dans le. Le composant parent est également aléatoire. Oui, il n'y a pas de règle spéciale. Supposons que l'ordre de référence des composants enfants est le suivant :

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

Si la référence $children est utilisée pour obtenir tous les composants enfants, alors "child-c1" n'est pas toujours en première position, comme suit :

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

2. L'ordre des prêts est plus déroutant

Selon mon estimation, l'ordre des composants parent et enfant devrait être d'abord fils puis parent, afin de garantir que le composant est entièrement chargé, mais à partir d'exemples pratiques Regardez, il n'y a aucun ordre du tout. Parfois, le composant parent est chargé en premier, et parfois le composant enfant est chargé en premier, donc dans la pratique de la programmation, vous ne devez pas vous fier à leur ordre de chargement. .

3. Conclusion

En pratique, si vous devez vous assurer que les composants sont chargés séquentiellement, vous ne devez pas vous fier à l'ordre de vie des composants, ni au cycle de vie prêt des composants parents et enfants. .

Comment juger que tous les sous-composants sont chargés

Lors de l'utilisation de composants parent-enfant ensemble, en particulier lorsque les informations de configuration sont séparées des informations commerciales, nous devons souvent Après le sous-composant -component est chargé, les services associés du composant parent sont exécutés. Prenons comme exemple la structure de composant suivante :

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

Dans l'exemple ci-dessus, nous devons combiner les informations de configuration du sous-composant. Par conséquent, ce n'est qu'une fois les sous-composants chargés que les informations de configuration combinées peuvent être précises et complètes.

Donc, si vous utilisez directement l'événement monté (événement prêt en 1.0), vous obtiendrez certainement des résultats incorrects. Afin de résoudre ce problème, autant créer la structure de données et la méthode suivantes :

En définissant l'élément de configuration "colSize" et en vérifiant la méthode "addColModel" appelée par le sous-composant, nous pouvons déterminer le moment où tous les sous-composants sont chargés (le composant parent peut ou non être chargé à ce moment), afin d'effectuer les opérations de tri des informations de configuration nécessaires.

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

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

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

Mais dans les applications réelles, nous avons constaté que si le nombre de sous-composants est grand, un autre phénomène se produira. L'ordre de chargement des sous-composants se produira de manière aléatoire. Conformément à l'ordre de configuration, nous pouvons ajouter l'attribut « order » au sous-composant, comme suit. Le dernier contenu de configuration est le suivant :

Après un tel traitement, nous pouvons trier tous les sous-composants une fois qu'ils sont terminés. chargé, comme suit :

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

Conclusion

// 由于Vue无法确定子元素的加载顺序，必须手动指定order
this.colModel.sort((a, b) => a.order - b.order)

En ajoutant manuellement des variables et des méthodes auxiliaires, vous pouvez obtenir le moment où le sous-composant est chargé pour effectuer les opérations d'intégration.

Recommandations associées :

Explication détaillée de l'ordre de chargement et du principe d'exécution du javascript haute performance

Une brève analyse de chargement et de séquence de chargement CSS

Séquence de chargement des fichiers HTML, CSS et JS et état d'exécution

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!