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!
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
1655
14
1414
52
1307
25
1254
29
1228
24
![Error loading plugin in Illustrator [Fixed]](https://img.php.cn/upload/article/000/465/014/170831522770626.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Error loading plugin in Illustrator [Fixed]
Feb 19, 2024 pm 12:00 PM
When launching Adobe Illustrator, does a message about an error loading the plug-in pop up? Some Illustrator users have encountered this error when opening the application. The message is followed by a list of problematic plugins. This error message indicates that there is a problem with the installed plug-in, but it may also be caused by other reasons such as a damaged Visual C++ DLL file or a damaged preference file. If you encounter this error, we will guide you in this article to fix the problem, so continue reading below. Error loading plug-in in Illustrator If you receive an "Error loading plug-in" error message when trying to launch Adobe Illustrator, you can use the following: As an administrator
PyCharm usage tutorial: guide you in detail to run the operation
Feb 26, 2024 pm 05:51 PM
PyCharm is a very popular Python integrated development environment (IDE). It provides a wealth of functions and tools to make Python development more efficient and convenient. This article will introduce you to the basic operation methods of PyCharm and provide specific code examples to help readers quickly get started and become proficient in operating the tool. 1. Download and install PyCharm First, we need to go to the PyCharm official website (https://www.jetbrains.com/pyc
What is sudo and why is it important?
Feb 21, 2024 pm 07:01 PM
sudo (superuser execution) is a key command in Linux and Unix systems that allows ordinary users to run specific commands with root privileges. The function of sudo is mainly reflected in the following aspects: Providing permission control: sudo achieves strict control over system resources and sensitive operations by authorizing users to temporarily obtain superuser permissions. Ordinary users can only obtain temporary privileges through sudo when needed, and do not need to log in as superuser all the time. Improved security: By using sudo, you can avoid using the root account during routine operations. Using the root account for all operations may lead to unexpected system damage, as any mistaken or careless operation will have full permissions. and
Stremio subtitles not working; error loading subtitles
Feb 24, 2024 am 09:50 AM
Subtitles not working on Stremio on your Windows PC? Some Stremio users reported that subtitles were not displayed in the videos. Many users reported encountering an error message that said "Error loading subtitles." Here is the full error message that appears with this error: An error occurred while loading subtitles Failed to load subtitles: This could be a problem with the plugin you are using or your network. As the error message says, it could be your internet connection that is causing the error. So please check your network connection and make sure your internet is working properly. Apart from this, there could be other reasons behind this error, including conflicting subtitles add-on, unsupported subtitles for specific video content, and outdated Stremio app. like
What to do if you forget to press F2 for win10 boot password
Feb 28, 2024 am 08:31 AM
Presumably many users have several unused computers at home, and they have completely forgotten the power-on password because they have not been used for a long time, so they would like to know what to do if they forget the password? Then let’s take a look together. What to do if you forget to press F2 for win10 boot password? 1. Press the power button of the computer, and then press F2 when turning on the computer (different computer brands have different buttons to enter the BIOS). 2. In the bios interface, find the security option (the location may be different for different brands of computers). Usually in the settings menu at the top. 3. Then find the SupervisorPassword option and click it. 4. At this time, the user can see his password, and at the same time find the Enabled next to it and switch it to Dis.
Linux Deploy operation steps and precautions
Mar 14, 2024 pm 03:03 PM
LinuxDeploy operating steps and precautions LinuxDeploy is a powerful tool that can help users quickly deploy various Linux distributions on Android devices, allowing users to experience a complete Linux system on their mobile devices. This article will introduce the operating steps and precautions of LinuxDeploy in detail, and provide specific code examples to help readers better use this tool. Operation steps: Install LinuxDeploy: First, install
How to disable the action button on iPhone 15 Pro and 15 Pro Max
Nov 07, 2023 am 11:17 AM
Apple brought some Pro-exclusive hardware features to iPhone 15 Pro and 15 Pro Max, which attracted everyone’s attention. We're talking titanium frames, sleek designs, the new A17 Pro chipset, an exciting 5x telephoto lens, and more. Of all the bells and whistles added to the iPhone 15 Pro models, the action button remains a prominent and prominent feature. Needless to say, it is a useful addition to launching actions on your iPhone. That said, you could accidentally hold down the Action button and trigger the feature inadvertently. Frankly, it's annoying. To avoid this, you should disable the action button on iPhone 15 Pro and 15 Pro Max. let
Huawei Mate60 Pro screenshot operation steps sharing
Mar 23, 2024 am 11:15 AM
With the popularity of smartphones, the screenshot function has become one of the essential skills for daily use of mobile phones. As one of Huawei's flagship mobile phones, Huawei Mate60Pro's screenshot function has naturally attracted much attention from users. Today, we will share the screenshot operation steps of Huawei Mate60Pro mobile phone, so that everyone can take screenshots more conveniently. First of all, Huawei Mate60Pro mobile phone provides a variety of screenshot methods, and you can choose the method that suits you according to your personal habits. The following is a detailed introduction to several commonly used interceptions:
