浅谈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 相关文章推荐
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 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
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
JS可以控制样式的名称写法一览
2014/01/16 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
python开发之函数定义实例分析
2015/11/12 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
党员公开承诺践诺书
2014/03/25 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
2014年党员整改措施
2014/10/24 职场文书
2014年手术室工作总结
2014/11/26 职场文书
个人先进材料范文
2014/12/30 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
公开致歉信
2019/06/24 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS
HTTP中的Content-type详解
2022/01/18 HTML / CSS
介绍一下28个JS常用数组方法
2022/05/06 Javascript