有大佬知道为什么 vue App.vue文件里的 console.log()比main.js先执行吗

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

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

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

我试了一下

main.js

// 写法不标准,仅仅为了测试
console.log('main==app前')
import App from './App.vue'
console.log('main==app后')

app.vue

<script>

console.log('app === script')

</script>

<script setup>
console.log('app === script setup')
</script>

打印结果

app === script
main.js:2 main==app前
main.js:4 main==app后
App.vue:32 app === script setup

总结

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

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

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

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

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

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

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

类似于

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

然后才能 createApp (App)

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

好的 谢谢大佬~~~~

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

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

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

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

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

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

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

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

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

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

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

好的,谢谢回答~~~~~