浅谈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)
结论
通过手动添加辅助变量与方法，可以获取子组件加载完成的时刻，从而执行整合性操作。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解vue2路由vue-router配置（懒加载）
vue路由配置以及按需加载模块配置 1.首先在component文件目录下写俩组件: First.vue: <template> <div>我是第一个页面</div> </template> <script> export default { name: 'first', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add &
-
Vue.js中用webpack合并打包多个组件并实现按需加载
前言 随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能
-
vue2笔记 — vue-router路由懒加载的实现
在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用. 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某
-
vue.js学习笔记:如何加载本地json文件
在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地的json文件呢,下面就将步骤贴出来.(此时项目是由webpack打包而成). 整个项目是由webpack打包而成.具体项目结构如下: 1:打包好的文件在此,http://pan.baidu.com/s/1dFCAzux 2:我们找到bulid>dev-server.js,然后打开 3:在里面加入这
-
Vue自定义图片懒加载指令v-lazyload详解
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: <img v-lazyload="imageSrc" > imageSrc是要加载的图片的实际路径. 为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下: //Vue 图片懒加载,导出模块 export default (Vue , o
-
vue2组件实现懒加载浅析
一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 三.如何与webpack配合实现组件懒加载 1.在webpack配置文件中的output路径配置chunkFilename属性 output: { pat
-
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery.js"
-
vue实现ajax滚动下拉加载，同时具有loading效果(推荐)
代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue测试ajax的使用</title> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-
-
浅谈Vue的加载顺序探讨
在Vuejs 1.0版本中,如果父子组件进行配合,它们的生命周期执行具有如下特点: 1. created总是先父后子 生命周期函数created总是按照从父到子的顺序依次执行,但是兄弟之间没有严格按照这样的顺序执行,估计是采用了异步函数,不仅如此,子组件在父组件中的插入顺序也是随机的,并没有什么特别的规律.假定子组件的引用顺序如下: <div class="container"> <child-c1 v-ref:child1></child-c1>
-
浅谈angular懒加载的一些坑
写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包压缩到一个文件中,在页面初次访问的时候加载,造成页面初始载入缓慢,在此基础上,提出按需加载,即只有当用户访问某个模块的时候,该模块的脚本才会加载. 工具类: 项目使用grunt打包根据AMD规范,使用grunt-contrib-requirejs来压缩合并模块,同时用ocLazyLoad来完成ang
-
浅谈hibernate急迫加载问题(多重外键关联)
数据库结构如下 strategy中有外键member_id(关联member表)外键strategy_category(关联category表)而member表中有外键position_id(关联positons表) 如果前台页面直接查询stategy表中内容我们hql语句如果这么写 Stringhql="FromStrategywhereid=:id"; 控制台会报nosession错误这是因为hibernate默认懒加载只有我们需要的时候才会将关联的对象加载出来这里在我们前台需要取
-
浅谈SpringBoot Bean加载优先级的问题
目录 Bean加载优先级的问题 同一个类中加载顺序 @DependsOn控制顺序 @Order不能控制顺序 Spring控制Bean加载顺序 使用Spring @Order控制bean加载顺序 使用Spring @DependsOn控制bean加载顺序 小结一下 Bean加载优先级的问题 spring容器载入bean顺序是不确定的,spring框架没有约定特定顺序逻辑规范.但spring保证如果A依赖B(如beanA中有@Autowired B的变量),那么B将先于A被加载. 同一个类中加载顺序
-
浅谈Spring Context加载方式
Spring 加载方式 对于可执行文件方式,我们一般的加载Spring 配置的方式是 ClassPathXmlApplicationContext public static void main(String[] args) { ClassPathXmlApplicationContext xmlApplicationContext = new ClassPathXmlApplicationContext("classpath:spring-context.xml"); DemoSer
-
基于Vue渲染与插件的加载顺序的问题详解
Vue实践分享(三)在实际项目的开发过程中,经常会遇到页面还没渲染完成而插件就已经开始加载的问题,这样就会导致显示和功能出错. 可以通过Vue中的nextTick来解决 Vue.nextTick(function() { //widget }); 这样就会在页面渲染完成后再执行nextTick内的插件 以上这篇基于Vue渲染与插件的加载顺序的问题详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 浅谈Vue的加载顺序探讨 Vue.js学习教程
-
浅谈Java 类中各成分加载顺序和内存中的存放位置
一.什么时候会加载类? 使用到类中的内容时加载:有三种情况 1.创建对象:new StaticCode(); 2.使用类中的静态成员:StaticCode.num=9; StaticCode.show(); 3.在命令行中运行:java StaticCodeDemo 二.类所有内容加载顺序和内存中的存放位置 利用语句进行分析: 1.Person p=new Person("zhangsan",20); 该句话所做的事情: 1.在栈内存中,开辟main函数的空间,建立main函数的变量
-
浅谈vue首屏加载优化
本文介绍了浅谈vue首屏加载优化,分享给大家,具体如下: 库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码. 修改前: import MuseUI from 'muse-ui' import 'muse-ui/dist/muse-ui.css' imp
-
浅谈springboot一个service内组件的加载顺序
springboot service内组件加载顺序 先加载自身构造器,所以在构造器中初始化时若使用需要注入的(即@Autowired注解的)组件相关的方法,则会报null: 然后加载注入的组件即@Autowired 最后加载@PostConstruct注解的方法,在该方法内可以使用注入的组件. 一个service初始化的一些操作根据不同情况可以选择在不同的地方进行初始化 Spring boot 配置文件 加载顺序 springboot 启动会扫描以下位置的application.properti
-
浅谈vue中组件绑定事件时是否加.native
组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- <mt-field label="用户名" placeholder="请输入用户名"></mt-field> --> <input type="text" @keyup.native="show($event)