先后顺序:

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. monkey命令解析

  2. sha1 算法源码

    原来指望sha1 这种烂大街的算法 不会出什么幺蛾子 结果<linux C编程实战Code>bt章节的sha1 代码 我在linux和windows下的结果不一样 然后用了哈希工具查看了下 ...

  3. python3 第二十九章 - 内置函数之tuple相关

    Python元组包含了以下内置函数 序号 方法及描述 实例 1 len(tuple)计算元组元素个数. >>> tuple1 = ('Google', 'Baidu', 'Taoba ...

  4. java之路 Hello World 练习

    class HelloWorld{ /** * 这是主方法 */ public static void main(String[] args){ //输出一句话 System.out.println( ...

  5. JAVA实现等腰三角形

    class Triangle { public static void main(String[] args) { for(int a=0; b<5; a++)//这个代表只有四行 { for( ...

  6. ----XMLHttpRequestAPI简单介绍----

    XMLHttpRequest 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新.这使得Web页面可以只更新页面的局部,而不影响用户的操作 ...

  7. new-xml-data

    ~<cyfxml> <hhis> <hhi name="大货系统" is-sub-item-folder="True" is-su ...

  8. js 控制光标到指定位置

    js控制光标到指定节点位置(适用于富文本编辑器中) function placeCaretAtEnd(el) { //传入光标要去的jq节点对象 el.focus(); if (typeof wind ...

  9. 信号(signal)

    1.信号本质 1)信号是一种软件中断,是在软件层次上对中断的模拟: 2).在日常生活中也有很多信号,比如常见的红绿灯信号,我们看见红灯就停下,linux中的信号也是类似的,它提供一种机制告诉某个进程在 ...

  10. Spring-boot在windows上安装CLI(Command Line Interface)的步骤!

    首先去下载安装包,我这里整了一个zip包,一个tar包,下载地址:https://github.com/zhangyawei117/Spring-boot-CLI.git 下载完了之后,把zip包解压 ...