Comment utiliser l'ordre de chargement de Vue

Cette fois, je vais vous montrer comment faire fonctionner la séquence de chargement de Vue et quelles sont les précautions pour faire fonctionner la séquence de chargement de Vue. Ce qui suit est un cas pratique, jetons un coup d'oeil.

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

1. La création vient toujours d'abord de père en fils

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 sont pas exécutés strictement dans cet ordre. On estime qu'une fonction asynchrone est utilisée. est dans le composant parent. L'ordre d'insertion est également aléatoire et il n'y a pas de règle spéciale. Supposons que les sous-composants soient référencés dans l'ordre suivant :

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

Si vous utilisez la référence $children 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 prêt des composants parent et enfant devrait être d'abord enfant puis parent, afin de garantir que les composants sont entièrement chargés. Cependant, à en juger par des exemples pratiques, prêt n'a parfois aucun ordre. est chargé en premier, et parfois c'est le cas. Les sous-composants sont chargés 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 dans l'ordre, 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 ont été chargés

Lors de l'utilisation conjointe de composants parent-enfant, en particulier lorsque les informations de configuration sont séparées des informations commerciales, nous devons souvent exécuter les services associés du composant parent une fois que tous les composants enfants sont chargés. Prenons l'exemple de la structure de composants 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 des sous-composants. Par conséquent, les informations de configuration combinées ne peuvent être précises et complètes que lorsque tous les sous-composants sont chargés.

Par conséquent, 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, nous pourrions aussi bien 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), ainsi effectuer les paramétrages nécessaires Opérations de tri des informations.

props : {
 colSize : {
  type : Number,
  default : 1
 }
}
data () {
 return {
  // 用于获取所有的子组件配置信息
  colModel : [],
  readySize : 0
 }
},
methods : {
 /**
  * 由子组件在加载完成时调用
  */
 addColModel () {
   this.readySize ++
   // 检查进度是否设置的colSize一致
   if(this.readySize == this.colSize) {
   // 这时候所有的子组件已加载完成
   } 
 }
}

Cependant, dans les applications réelles, nous avons constaté que si le nombre de sous-composants est important, un autre phénomène se produira. L'ordre de chargement des sous-composants se produira de manière aléatoire si nous voulons nous assurer que l'ordre de chargement est cohérent avec l'ordre de configuration. , nous pouvons ajouter l'attribut « order »

, comme suit, le dernier contenu de configuration est le suivant :

Après un tel traitement, nous pouvons trier tous les sous-composants après leur chargement, 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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres sujets connexes dans l'article du site Web PHP chinois !

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

Lecture recommandée :

Explication détaillée de l'obtention du cas de localisation géographique actuel avec JS

parabola.js implémente la parabole et ajoute au panier Fonction

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!