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

绝地灬酷狼 2024-04-17 05:37 17阅读 0赞

先后顺序：

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

测试的页面代码块：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 3]  
文件的加载先后顺序：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 4]  
Index.vue的mounted()中的输出没有执行。why？

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

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

这里主要修改的是App.vue和main.js的代码，index.html和Index.vue主要是添加执行的时间：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 7]  
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内的代码

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/f5e28340a03b442d8bba6ee5801b5a8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/7939c8d3c6934514badfbed241a7178a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/779682c0d2cf4427aef6656ef06c6dd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/34f5bd6aafa24f3db54d1fa4a7c938d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/eb4af32c058644208d30e3dd997fa794.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/9b25f5365b174902998fe7d319d6c206.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/8d44aed1b15a42f9adbff9ac46a8743e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/e518ddb852744062964c2723f697fecb.png