浅谈Vue的加载顺序探讨

 更新时间:2017年10月25日 10:42:07   作者:蚁方阵  
本篇文章主要介绍了Vue的加载顺序探讨,详细的介绍了加载顺序以及如何判断所有的子组件加载完成。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

1. created总是先父后子

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

<div class="container">
 <child-c1 v-ref:child1></child-c1>
 <child-c2 v-ref:child2></child-c2>
</div>

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

 // 大多数时候判断会失败
 if(this.$children[0] === this.$refs.child1) {
  // 这里的代码很可能得不到执行机会
 }

2. ready的顺序更混乱

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

3. 结论

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

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

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

 <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> 

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

所以,如果直接用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”属性,如下,最新配置内容如下:

<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> 

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

// 由于Vue无法确定子元素的加载顺序,必须手动指定order
this.colModel.sort((a, b) => a.order - b.order)

结论

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

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

相关文章

  • Iview Table组件中各种组件扩展的使用

    Iview Table组件中各种组件扩展的使用

    这篇文章主要介绍了Iview Table组件中各种组件扩展的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • Vue使用Axios库请求数据时跨域问题的解决方法详解

    Vue使用Axios库请求数据时跨域问题的解决方法详解

    在 VUE 项目开发时,遇到个问题,正常设置使用 Axios 库请求数据时,报错提示跨域问题,那在生产坏境下,该去怎么解决呢?下面小编就来和大家详细讲讲
    2024-01-01
  • vue框架和react框架的区别以及各自的应用场景使用

    vue框架和react框架的区别以及各自的应用场景使用

    这篇文章主要介绍了vue框架和react框架的区别以及各自的应用场景使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue实现权限控制路由(vue-router 动态添加路由)

    vue实现权限控制路由(vue-router 动态添加路由)

    今天小编就为大家分享一篇vue实现权限控制路由(vue-router 动态添加路由),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 在浏览器console中如何调用vue内部方法

    在浏览器console中如何调用vue内部方法

    这篇文章主要介绍了在浏览器console中如何调用vue内部方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 详细讲解如何创建, 发布自己的 Vue UI 组件库

    详细讲解如何创建, 发布自己的 Vue UI 组件库

    当我们自己开发了一个 _UI Component_, 需要在多个项目中使用的时候呢? 我们首先想到的可能是直接复制一份过去对吗?我们为什么不发布一个 UI 组件库给自己用呢?下面小编和大家来一起学习下吧
    2019-05-05
  • Vue自定义指令实现按钮级的权限控制的示例代码

    Vue自定义指令实现按钮级的权限控制的示例代码

    在Vue中可以通过自定义指令来实现按钮权限控制,本文主要介绍了Vue自定义指令实现按钮级的权限控制的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2024-05-05
  • Vue程序化的事件监听器(实例方案详解)

    Vue程序化的事件监听器(实例方案详解)

    本文通过两种方案给大家介绍了Vue程序化的事件监听器,每种方案通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2020-01-01
  • Vue Router的手写实现方法实现

    Vue Router的手写实现方法实现

    这篇文章主要介绍了Vue Router的手写实现方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • vue cli使用绝对路径引用图片问题的解决

    vue cli使用绝对路径引用图片问题的解决

    这篇文章主要给大家介绍了关于vue cli使用绝对路径引用图片问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧。
    2017-12-12

最新评论