Vue中.vue文件比main.js先执行的问题

scluis

于 2022-02-17 19:39:28 发布

阅读量4.4k

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42619772/article/details/122989362

版权

本文探讨了在Vue项目中，.vue文件看似先于main.js执行的现象，原因是ES6的模块化加载规则。Vue加载顺序包括：index.html -> main.js -> app.vue -> router-view中的组件。ES6模块化采用静态加载，命令提升到模块头部，使得组件在main.js执行前已完成加载，从而造成A->B->App>main.js的输出顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

在main.js，App.vue和两个子组件（A.vue和B.vue）中分别输出语句，查看他们的加载顺序：

main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

new Vue({
   
        el: '#app',
        render: h => h(App),
        beforeCreate() {
   
            Vue.prototype.$bus = this //安装全局事件总线
        },
    })
console.log('mainjs===============')

App.vue

<template>
	<div >
		<A/>
		<B/>
	</div>
</templ

最低0.47元/天解锁文章