先后顺序:

index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的export外的js代码

测试的页面代码块:

文件的加载先后顺序:

Index.vue的mounted()中的输出没有执行。why?

--------------------------------------------------------------------------------------------------------------------------

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的,所以我们试下延迟创建新的Vue实例的情况下加载的顺序。

这里主要修改的是App.vue和main.js的代码,index.html和Index.vue主要是添加执行的时间:

index.html   >  App.vue的export外的js代码   >    main.js调用公共函数外的代码  >   App.vue公共函数的定时器外的代码   >  main.js调用公共函数内创建实例前的代码  >  App.vue的export里面的js代码  >  main.js调用公共函数内创建实例后的代码  >  App.vue公共函数的定时器内执行回调函数后的代码  >   Index.vue的export外的js代码

可以看到创建实例的前后,中间执行了一次App.vue中的mounted内的代码

vue项目中主要文件的加载顺序(index.html、App.vue、main.js)的更多相关文章

  1. vue项目中主要文件的加载顺序(index.html、main.js、App.vue)

    todo: https://www.cnblogs.com/xifengxiaoma/p/9493544.html https://www.cnblogs.com/stella1024/p/10563 ...

  2. Java之——Web项目中DLL文件动态加载方法

    本文转自:https://blog.csdn.net/l1028386804/article/details/53903557 在Java Web项目中,我们经常会用到通过JNI调用dll动态库文件来 ...

  3. vue项目中实现图片懒加载的方法

    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...

  4. Vue项目中实现图片懒加载

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! ---对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面 ...

  5. Vue项目中的文件/文件夹命名规范

    Vue项目中的文件/文件夹命名规范 0.2262018.09.21 16:01:09字数 820阅读 6979 文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小 ...

  6. vue项目中一些文件的作用

    原文 简书原文:https://www.jianshu.com/p/38749e5bec3c 大纲 1.vue项目结构 2.主要的配置文件 2.1.package.json 2.2.dev-serve ...

  7. vue项目实现路由按需加载的3种方式

    vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...

  8. WEB相关文件的加载顺序

    一. 1.启动一个WEB项目,WEB容器会先去读取它的配置文件web.xml,读取<context-param>和<listener>两个节点. 2.接着,容器创建一个Serv ...

  9. <context-param> 标签引出的 web.xml 文件的加载顺序 [转]

    代码示例 : <context-param> <param-name>contextConfigLocation</param-name> <param-va ...

随机推荐

  1. 计数排序之python

    话说,一口气不能吃个胖子, 一次性 学习 计数排序, 也确实容易消化不良. 下面,我们逐步学习下计数排序. 1.  已知一个简单列表 l1 = [5, 4, 3], 分析下这个列表的情况 5 > ...

  2. CAS SSO单点登录框架学习

    1.了解单点登录  SSO 主要特点是: SSO 应用之间使用 Web 协议(如 HTTPS) ,并且只有一个登录入口. SSO 的体系中有下面三种角色: 1) User(多个) 2) Web 应用( ...

  3. tomcat启动,但是访问不了可能的一种状况。

    Tomcat启动但是访问http://localhost:8080/或者http://127.0.0.1:8080/ 访问不了的时候, 有可能是因为你用了代理,把代理去掉就可以了

  4. identityserver4 代码系列

    链接:https://pan.baidu.com/s/1ePLwUxGpIPObwA8nnfDT9w 提取码:gr0x

  5. java数据结构至对称矩阵压缩存储

    刚刚刷java选择题,遇到的对称矩阵压缩存储问题,我们知道对称矩阵是aij=aji的矩阵,压缩存储可以采用一维数组和二维数组存储. 此处只讨论一维数组存储的形式,设数组下标从0开始,对称矩阵为n维矩阵 ...

  6. AHOI——Day1个人感悟

    今天,是个bilibili的日子.(嗯?什么意思?) 洛谷已经尽力了: 于是我带着洛谷的祝福,来到了AHOI的考场--合肥一中. 其实我是考完才签到的,我一大早五点多就起来了,到考场后,在肯德基吃了早 ...

  7. kettle连接oracle报错oracle.i18n.text.converter.CharacterConverter.OGS.getInstance(I)Loracle/i18n/text/converter/CharacterConverter

    问题背景1:需要将一张excel中的数据导入到数据库中,并且还有关联转换和去重的处理问题,且此excel表不是固定的,需要写一个脚本 当新的excel拿来的时候,可以直接导入即可.所以我想用kettl ...

  8. python -----一个简单的小程序(监控电脑内存,cpu,硬盘)

    一个简单的小程序 用函数实现!~~ 实现: cpu 使用率大于百分之50 时  ,  C 盘容量不足5 G 时, 内存 低于2G 时. 出现以上其中一种情况,发送自动报警邮件! 主要运用 到了两个 模 ...

  9. python3+ selenium3开发环境搭建

    环境搭建 基于python3和selenium3做自动化测试,俗话说:工欲善其事必先利其器:没有金刚钻就不揽那瓷器活,磨刀不误砍柴工,因此你必须会搭建基本的开发环境,掌握python基本的语法和一个I ...

  10. 阿里云 ECS centos java timer进程异常/混乱......的解决方法

    之前就知道timer进程长久运行容易出问题,所以一直对timer进行了很长一段时间的日志监控和数据库记录,大概观察了几个月,没发现过问题....然后就没管理了,数据库记录也没做了,昨天这问题就来了,t ...