有大佬知道为什么 vue App.vue文件里的 console.log()比main.js先执行吗 。具体的底层原理是咋样的

顺晟科技：

编译后，依赖项是有优先级的，应该是这个原因。但是为什么依赖项有优先，没研究过。

好的，谢谢回答~~~~~

2.为什么 console.log(‘app === script setup’) 最后打印

所以先后顺序还是可控的。

我试了不管位置在哪都是app.vue里的先输出，不知道为啥

优先级，当然是解决依赖问题呀。更底层的是js，然后是vue，然后是基于vue的各种UI库，和插件，最后是自己写的代码。如果没有优先级的话，vue还没加载呢，UI库咋办？插件怎么插？我代码里的 watch 怎么运行？话说，是不是我理解错误了。。。

总结

于是app.vue先被加载了， script 部分先被执行，然后是 mian.js， 等执行到 createApp(App) .use().mount(’#app’) 的地方，才执行 app.vue 的 setup 部分的代码。

我试了一下

ES6是应该学习的，webpack，了解一下就可以，除非刚需，否则不用太深入。还有rollup等，也可以了解一下。

好像是要我们去看 ES6 和 webpack的源码逻辑

谢谢大佬问答，不过我是想知道底层实现上为什么 import 先执行呢。父组件和子组件关系的话 应该是父组件内容先打印吧，就是大佬这里举的例子为什么程序会先打印 app === script 之后才打印main。

const { createApp } = {…这里先执行 return { createApp,… } } // 对应 import

打印结果

回答：setup中的代码是异步的(有待确定)，会在app组件初始化时调用。

回答：import 为静态编译，会被提升到顶部，其处理过程发生在打包环节。console.log的执行发生在app.js被浏览器引入时执行。

import 语句会被提升到模块顶部(代码的顶部)。因此，与 export 关键字类似， import 语句与使用导入值的语句的相对位置并不重要。不过，还是推荐把导入语句放在模块顶部。

好吧，这里写法不严谨，大概意思应该是对的。

app.vue

估计是console写在export 之前了，import的时候就会执行这些代码。

谢谢～我们突然需要去研究这个优先级的原因

需要把 import 指定的js代码（或者其他资源）加载进来，然后才可以使用呀。所以先被执行了。比如行加载import { createApp } from 'vue'，先执行vue，然后才可以使用 createApp，否则 createApp 是啥？未定义的东东咋用。另外，这个并不是父子关系，而是加载函数，调用函数的关系。

app.vue 的 script 的脚本先执行，main.js 里的后执行，app.vue 的 setup 里面的最后执行。

最后，设置断点的时候，发现 import App from ‘/src/App.vue’ 这样的行都无法设置断点。

然后才能 createApp （App）

1.为什么console.log(‘app === script’) 更先打印

main.js

以下内容来自《JavaScript程序设计》一书

基本没啥问题，虽然代码可以把 console.log 写在 import 的前面，但是执行的时候，应该是先执行 import ，然才执行其他脚本。

类似于

好的 谢谢大佬~~~~