How to operate Vue loading order

This time I will show you how to operate the Vue loading sequence, and what are the precautions for operating the Vue loading sequence. The following is a practical case, let's take a look.

In Vuejs 1.0 version, if the parent and child components cooperate, their life cycle execution has the following characteristics:

1. Created is always created first, then the son

Life cycle Functioncreated is always executed in the order from parent to child, but the brothers are not executed strictly in this order. It is estimated that an asynchronous function is used. Not only that, the child component is in the parent component The insertion order is also random and there is no special rule. Assume that the subcomponents are referenced in the following order:

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

If you use the $children reference to get all child components, then "child-c1" is not always in the first position, as follows:

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

2. The order of ready is more confusing

According to my estimation, the ready order of parent and child components should be first child and then parent, so as to ensure that the components are fully loaded. However, judging from practical examples, ready has no order at all. Sometimes the parent component is loaded first, and sometimes it is. Subcomponents are loaded first, so in Programming practice, you must not rely on their loading order.

3. Conclusion

In practice, if you need to ensure that components are loaded in sequence, you must not rely on the life order of components, nor the ready life cycle of parent and child components.

How to determine that all sub-components have been loaded

When using parent-child components together, especially when configuration information is separated from business information, we often need to execute the related services of the parent component after all child components are loaded. Take the following component structure as an example:

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

In the above example, we need to combine the configuration information of sub-components. Therefore, the combined configuration information can be accurate and complete only when all sub-components are loaded.

Therefore, if you directly use the mounted event (ready event in 1.0), you will definitely get incorrect results. In order to solve this problem, we might as well create the following data structure and method:

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

By setting the configuration item "colSize" and checking the method "addColModel" called by the sub-component, we can determine the moment when all sub-components are loaded (the parent component may or may not be loaded at this time), thereby making the necessary configurations Information sorting operations.

However, in actual applications, we found that if the number of sub-components is large, another phenomenon will occur. The loading order of sub-components will occur randomly. If we want to ensure that the loading order is consistent with the configuration order, we can add " order”Attribute, as follows, the latest configuration content is as follows:

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

After such processing, we can sort all sub-components after they are loaded, as follows:

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of JS getting the current geographical location case

parabola.js implements parabola and adds to shopping cart Function

The above is the detailed content of How to operate Vue loading order. For more information, please follow other related articles on the PHP Chinese website!