浅谈Vue的加载顺序探讨

前端之家收集整理的这篇文章主要介绍了浅谈Vue的加载顺序探讨前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在Vuejs 1.0版本中,如果父子组件进行配合,它们的生命周期执行具有如下特点:

1. created总是先父后子

生命周期函数created总是按照从父到子的顺序依次执行,但是兄弟之间没有严格按照这样的顺序执行,估计是采用了异步函数,不仅如此,子组件在父组件中的插入顺序也是随机的,并没有什么特别的规律。假定子组件的引用顺序如下:

如果采用$children引用来获取所有的子组件,那么”child-c1”并不总是处于第一个位置,如下:

代码很可能得不到执行机会 }

2. ready的顺序更混乱

按照我的估计,父子组件的ready顺序应该是先子后父,这样才能保证组件完全加载完成,但从实践的实例来看,ready完全没有顺序,有时候是父组件先加载完成,也有时候是子组件先加载完成,所以在编程实践中,绝对不可以依赖他们的加载顺序。

3. 结论

在实践中,如果需要保障组件依次加载完成,绝对不可以依赖组件的生命顺序,也不能依赖父子组件的ready生命周期。

如何判断所有的子组件加载完成

在父子组件的配合使用中,尤其是配置信息与业务信息相分离的情况下,我们经常需要在所有的子组件加载完成后,再执行父组件的相关服务,以如下的组件结构为例:

用户名称" name="remarkName" width="75" :sortable="true">

在上面的例子中,我们需要组合子组件的配置信息,因此,只有所有的子组件加载完成,组合的配置信息才能准确完整。

所以,如果直接用mounted事件(1.0中为ready事件),则一定得到不正确的结果,为了解决此问题,我们不妨生命如下的数据结构与方法

data () {
return {
// 用于获取所有的子组件配置信息
colModel : [],readySize : 0
}
},methods : {
/**

  • 由子组件在加载完成时调用
    */
    addColModel () {
    this.readySize ++
    // 检查进度是否设置的colSize一致
    if(this.readySize == this.colSize) {
    // 这时候所有的子组件已加载完成
    }
    }
    }

通过设置配置项“colSize”与检查子组件调用方法“addColModel”,我们可确定所有子组件加载完成的时刻(此时父组件有可能加载完成,也可能未加载完成),从而进行必要的配置信息整理操作。

但是在实际应用中,我们发现,如果子组件的数量较多时,会发生另外一种现象,子组件加载顺序会随机发生,如果要保证加载顺序与配置顺序一致,我们可以在子组件中加入“order”属性,如下,最新配置内容如下:

经过这样的处理,我们可以在所有子组件加载完成对其进行排序,如下:

a.order - b.order)

结论

通过手动添加辅助变量与方法,可以获取子组件加载完成的时刻,从而执行整合性操作。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/35598.html

猜你在找的Vue相关文章