Discussion on Vue loading sequence and vue Loading

Discussion on Vue loading sequence and vue Loading

In Vuejs 1.0, if the parent and child components work together, their lifecycle execution has the following features:

1. created is always the first child

The Life Cycle Function created is always executed in sequence from parent to child, but the brothers are not strictly executed in this order. It is estimated that asynchronous functions are used, the insertion sequence of child components in the parent component is random and there is no special rule. The reference sequence of the dummy child component is as follows:

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

If you use a $ children reference to retrieve all child components, the child-c1 is not always at the first position, as shown below:

// If (this. $ children [0] === this. $ refs. child1) will fail to be judged most of the time {// The code here may not be able to be executed}

2. The order of ready is more chaotic.

According to my estimation, the ready sequence of the Parent and Child components should be first child and then parent, so that the components can be fully loaded. However, from the perspective of practical instances, ready has no order at all, sometimes the parent component is loaded first, or sometimes the child component is loaded first. Therefore, in programming practice, it is absolutely not allowed to depend on their loading sequence.

3. Conclusion

In practice, if you need to ensure that the components are loaded in sequence, you cannot depend on the component's life sequence or the ready life cycle of the Parent and Child components.

How to determine whether all child components are loaded

In combination with parent and child components, especially when the configuration information is separated from the business information, we often need, then execute the relevant services of the parent component. The following component structure is used as an example:

<Jq-grid: url = "url" col-size = "5": sub-grid = "true" ref = "accountGrid": on-ready = "initGrid ": query = "queryParams"> <jq-col label = "Account" name = "username" width = "75 ": sortable = "true"> </jq-col> <jq-col label = "User name" name = "remarkName" width = "75 ": sortable = "true"> </jq-col> <jq-col label = "Creation Time" name = "createTime" width = "90"> </jq-col> </jq-grid>

In the above example, we need to combine the configuration information of the child components. Therefore, only after all the child components are loaded can the configuration information of the combination be accurate and complete.

Therefore, if you directly use the mounted event (ready event in 1.0), you will surely get incorrect results. To solve this problem, we may wish to use the following data structures and methods:

Props: {colSize: {type: Number, default: 1} data () {return {// used to obtain the configuration information of all child components colModel: [], readySize: 0 }}, methods: {/*** called by the sub-component when loading is complete */addColModel () {this. readySize ++ // check whether the colSize set by the progress is consistent if (this. readySize = this. colSize) {// at this time, all the child components have been loaded }}}

By setting the configuration item "colSize" and checking the method "addColModel" called by the sub-component, we can determine the time when all the sub-components are loaded (the parent component may be loaded at this time, may not be loaded) to sort the necessary configuration information.

However, in practice, we find that if there are too many sub-components, the sub-component loading sequence will happen randomly, to ensure that the loading order is consistent with the configuration order, you can add the "order" attribute to the child component 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" name = "hostName" width = "75 ": sortable = "true"> </jq-col> <jq-col order = "2" label = "host model" name = "model" width = "60 ": sortable = "true"> </jq-col> <jq-col order = "3" label = "manufacturer" name = "vendor" width = "60 ": sortable = "true"> </jq-col> </jqgrid>

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

// Because Vue cannot determine the loading sequence of sub-elements, you must manually specify orderthis. 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 to perform the integrated operation.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.