Discussion on Vue's loading order examples

This article mainly introduces the discussion of Vue's loading order, introducing the loading order in detail and how to judge that all sub-components are loaded. The editor thinks it’s pretty good, so I’d like to share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

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

1. Created is always created first, then the child

The life cycle function created is always executed in the order from parent to child, but the brothers do not strictly follow this order. It is estimated that an asynchronous function is used. Not only that, the insertion order of child components in the parent component is also random. Yes, there is no special rule. Assume that the reference order of child components is as follows:

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

If $children reference is used to obtain 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 even more confusing.

According to my estimation, the order of ready for parent and child components should be first son and then parent, so as to ensure that the component is fully loaded. However, judging from practical examples, ready is completely There is no order. Sometimes the parent component is loaded first, and sometimes the child component is loaded first. Therefore, 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 judge 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 After the sub-component is loaded, the related services of the parent component are executed. 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 the sub-components. Therefore, only all sub-components Only when the components are loaded can the combined configuration information be accurate and complete.

So, 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), so as to perform the necessary Configuration information sorting operation.

But 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 the "order" attribute to the subcomponent, 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 subcomponents after they are loaded, as follows:

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

Conclusion

By manually adding auxiliary variables and methods, you can obtain the time when the sub-component is loaded, so as to perform integrated operations.

Related recommendations:

Detailed explanation of the loading sequence and execution principle of high-performance javascript

A brief analysis of CSS loading and loading Sequence

html, css and js file loading sequence and execution

The above is the detailed content of Discussion on Vue's loading order examples. For more information, please follow other related articles on the PHP Chinese website!