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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
SVM examples in Python
Jun 11, 2023 pm 08:42 PM
Support Vector Machine (SVM) in Python is a powerful supervised learning algorithm that can be used to solve classification and regression problems. SVM performs well when dealing with high-dimensional data and non-linear problems, and is widely used in data mining, image classification, text classification, bioinformatics and other fields. In this article, we will introduce an example of using SVM for classification in Python. We will use the SVM model from the scikit-learn library
VUE3 Getting Started Example: Making a Simple Video Player
Jun 15, 2023 pm 09:42 PM
As the new generation of front-end frameworks continues to emerge, VUE3 is loved as a fast, flexible, and easy-to-use front-end framework. Next, let's learn the basics of VUE3 and make a simple video player. 1. Install VUE3 First, we need to install VUE3 locally. Open the command line tool and execute the following command: npminstallvue@next Then, create a new HTML file and introduce VUE3: <!doctypehtml>
Learn best practice examples of pointer conversion in Golang
Feb 24, 2024 pm 03:51 PM
Golang is a powerful and efficient programming language that can be used to develop various applications and services. In Golang, pointers are a very important concept, which can help us operate data more flexibly and efficiently. Pointer conversion refers to the process of pointer operations between different types. This article will use specific examples to learn the best practices of pointer conversion in Golang. 1. Basic concepts In Golang, each variable has an address, and the address is the location of the variable in memory.
Deep dive: What is the Django framework?
Jan 19, 2024 am 09:23 AM
The Django framework is a Python framework for web applications that provides a simple and powerful way to create web applications. In fact, Django has become one of the most popular Python web development frameworks and has become the first choice for many companies, including Instagram and Pinterest. This article will delve into what the Django framework is, including basic concepts and important components, as well as specific code examples. Django basic conceptsDjan
PHP simple web crawler development example
Jun 13, 2023 pm 06:54 PM
With the rapid development of the Internet, data has become one of the most important resources in today's information age. As a technology that automatically obtains and processes network data, web crawlers are attracting more and more attention and application. This article will introduce how to use PHP to develop a simple web crawler and realize the function of automatically obtaining network data. 1. Overview of Web Crawler Web crawler is a technology that automatically obtains and processes network resources. Its main working process is to simulate browser behavior, automatically access specified URL addresses and extract all information.
The relationship between the number of Oracle instances and database performance
Mar 08, 2024 am 09:27 AM
The relationship between the number of Oracle instances and database performance Oracle database is one of the well-known relational database management systems in the industry and is widely used in enterprise-level data storage and management. In Oracle database, instance is a very important concept. Instance refers to the running environment of Oracle database in memory. Each instance has an independent memory structure and background process, which is used to process user requests and manage database operations. The number of instances has an important impact on the performance and stability of Oracle database.
Verification code usage examples in Gin framework
Jun 23, 2023 am 08:10 AM
With the popularity of the Internet, verification codes have become a necessary process for login, registration, password retrieval and other operations. In the Gin framework, implementing the verification code function has become extremely simple. This article will introduce how to use a third-party library to implement the verification code function in the Gin framework, and provide sample code for readers' reference. 1. Install dependent libraries Before using the verification code, we need to install a third-party library goCaptcha. To install goCaptcha, you can use the goget command: $goget-ugithub
A deep dive into common special characters in Linux
Mar 14, 2024 pm 02:54 PM
As a commonly used open source operating system, Linux operating system has strong customizability and flexibility. When using Linux systems, we often encounter the processing of various special characters. These special characters have special meanings in the command line and can implement many advanced functions. This article will delve into the common special characters in Linux and introduce their usage in detail with specific code examples. Wildcards: Wildcards are special characters used to match file names. Common wildcards include *,?, [], etc. Here are several
