本文主要介绍了vue的加载顺序探讨，详细的介绍了加载顺序以及如何判断所有的子组件加载完成。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
在Vuejs 1.0版本中，如果父子组件进行配合，它们的生命周期执行具有如下特点：
1. created总是先父后子
生命周期函数created总是按照从父到子的顺序依次执行，但是兄弟之间没有严格按照这样的顺序执行，估计是采用了异步函数，不仅如此，子组件在父组件中的插入顺序也是随机的，并没有什么特别的规律。假定子组件的引用顺序如下：
登录后复制
如果采用$children引用来获取所有的子组件，那么”child-c1”并不总是处于第一个位置，如下：
立即学习“前端免费学习笔记（深入）”；
// 大多数时候判断会失败 if(this.$children[0] === this.$refs.child1) { // 这里的代码很可能得不到执行机会 }
登录后复制
2. ready的顺序更混乱
按照我的估计，父子组件的ready顺序应该是先子后父，这样才能保证组件完全加载完成，但从实践的实例来看，ready完全没有顺序，有时候是父组件先加载完成，也有时候是子组件先加载完成，所以在编程实践中，绝对不可以依赖他们的加载顺序。
3. 结论
在实践中，如果需要保障组件依次加载完成，绝对不可以依赖组件的生命顺序，也不能依赖父子组件的ready生命周期。
如何判断所有的子组件加载完成
在父子组件的配合使用中，尤其是配置信息与业务信息相分离的情况下，我们经常需要在所有的子组件加载完成后，再执行父组件的相关服务，以如下的组件结构为例：
登录后复制
在上面的例子中，我们需要组合子组件的配置信息，因此，只有所有的子组件加载完成，组合的配置信息才能准确完整。
所以，如果直接用mounted事件（1.0中为ready事件），则一定得到不正确的结果，为了解决此问题，我们不妨生命如下的数据结构与方法：
props : { colSize : { type : Number, default : 1 }}data () { return { // 用于获取所有的子组件配置信息 colModel : [], readySize : 0 }},methods : { /** * 由子组件在加载完成时调用 */ addColModel () { this.readySize ++ // 检查进度是否设置的colSize一致 if(this.readySize == this.colSize) { // 这时候所有的子组件已加载完成 } }}
登录后复制
通过设置配置项“colSize”与检查子组件调用的方法“addColModel”，我们可确定所有子组件加载完成的时刻（此时父组件有可能加载完成，也可能未加载完成），从而进行必要的配置信息整理操作。
但是在实际应用中，我们发现，如果子组件的数量较多时，会发生另外一种现象，子组件加载顺序会随机发生，如果要保证加载顺序与配置顺序一致，我们可以在子组件中加入“order”属性，如下，最新配置内容如下：
登录后复制
经过这样的处理，我们可以在所有子组件加载完成对其进行排序，如下：
// 由于Vue无法确定子元素的加载顺序，必须手动指定orderthis.colModel.sort((a, b) => a.order - b.order)
登录后复制
结论
通过手动添加辅助变量与方法，可以获取子组件加载完成的时刻，从而执行整合性操作。
相关推荐：
高性能javascript之加载顺序与执行原理详解
浅析CSS 的加载及加载顺序
html、css以及js文件加载顺序及执行情况
以上就是Vue的加载顺序实例探讨的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2789958.html
