浅谈Vue的加载顺序探讨


Posted in Javascript onOctober 25, 2017

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

结论

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

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

Javascript 相关文章推荐
用js解决数字不能换行问题
Aug 10 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
JavaScript模块模式实例详解
Oct 25 #Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 #Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 #Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 #Javascript
vue语法之拼接字符串的示例代码
Oct 25 #Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 #Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 #Javascript
You might like
ThinkPHP写第一个模块应用
2012/02/20 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
numpy中矩阵合并的实例
2018/06/15 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
幼教个人求职信范文
2013/12/02 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
企业办公室岗位职责
2014/03/12 职场文书
敬老院活动总结
2014/04/28 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
建议书的格式
2014/05/12 职场文书
档案保密承诺书
2014/06/03 职场文书
2015年度保密工作总结
2015/04/24 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android