Vue中加载顺序的示例分析

如果采用$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无法确定子元素的加载顺序，必须手动指定order
this.colModel.sort((a, b) => a.order - b.order)

关于“Vue中加载顺序的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。