先后顺序:

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. django添加控件

    function bindRemoveCls() { $('#removeCls').click(function () { var options = $('#sel')[0].selectedOp ...

  2. 服务管理之rsync

    目录 rsync 1. rsync简介 2. rsync特性 4. rsync命令 5. rsync+inotify rsync 1. rsync简介 rsync是linux系统下的数据镜像备份工具. ...

  3. dremio jdbc使用

    驱动包地址 链接:https://pan.baidu.com/s/1Nivkvze24hRH8pXOQleCgw 提取码:gp9z 使用dremio主要原因 : 1)springboot提供了es组件 ...

  4. Exp9 Web安全基础

    Exp9 Web安全基础 20154305 齐帅 一.实验要求 本实践的目标理解常用网络攻击技术的基本原理. Webgoat实践下相关实验: [目录] [第一部分 WebGoat 8.0] 1.Web ...

  5. Machine learning | 机器学习中的范数正则化

    目录 1. \(l_0\)范数和\(l_1\)范数 2. \(l_2\)范数 3. 核范数(nuclear norm) 参考文献 使用正则化有两大目标: 抑制过拟合: 将先验知识融入学习过程,比如稀疏 ...

  6. TYVJ1424-占卜DIY

    题目有点长,对于样例最好拿张A4纸模拟写一遍. 可以发现程序一定不会死循环,因为每种牌都是4张,而死循环的条件是某种牌有5张然后你拿了又放进去.如果写出来死循环了,那就是写不对了. 有几点可能是需要注 ...

  7. UE4动画及相关物理的更新顺序图

  8. IntelliJ IDEA的main方法,for循环,syso的快捷键

    原文链接:http://blog.csdn.net/tiantiandjava/article/details/42269173 今天偶然发现了IntelliJ中 创建main函数的快捷键,依次还有f ...

  9. POJ3040--Allowance(贪心)

    http://poj.org/problem?id=3040 思路: 输入时,如果有大于c的,直接把数量加到结果中,不把他加到数组中 把钱按面值排序 想取最大面额的钱,保证取到的钱小于等于c 然后取最 ...

  10. linux 最为常用的命令

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 cat /proc/cpuinfo 显示CPU info的信息 ...