还未被加载的动态组件，其样式却被提前被注入到页面的head内了

ETTTTT commented 2 years ago

// tab1组件
<template>
    <div class="tab">我是tab1组件</div>
</template>
<style >
.tab {
    font-size: 30px;
}
</style>

// tab2组件
<template>
    <div class="tab">我是tab2组件</div>
</template>
<style >
.tab {
    color: red;
}
</style>

// 入口组件

<template>
    <div id="app">
       <div class="box">
        <div @click="tab('tabOne')" class="btn">切换tab1</div>
        <div @click="tab('tabTwo')" class="btn">切换tab2</div>
       </div>
        <component v-bind:is="currentTabComponent"></component>
    </div>
</template>
<script>
import tabOne from './tab1.vue'
// tab2组件一开始还未被使用，但是组件内的样式却已经被注入到head内
import tabTwo from './tab2.vue'

export default {
    components: {
        tabTwo,
        tabOne,
    },
    data() {
        return {
            currentTabComponent: 'tabOne'
        }
    },
    methods: {
        tab(val) {
            this.currentTabComponent = val
        }
    }
}
</script>
<style>
.box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.btn{
    font-size: 20px;
    text-align: center;
    flex: 1;
    background: #ccc;
    margin: 10px;
 }
</style>

ETTTTT commented 2 years ago

https://github.com/ETTTTT/component-demo/blob/master/img/c0e434cf216d20e3d2d71694ed31d0a9.png css 被引入的截图复现的demo仓库：https://github.com/ETTTTT/component-demo

ETTTTT commented 2 years ago

使用webpack启动的项目不会有这个问题，使用vue-cli创建的项目，启动会有这个问题

ETTTTT commented 2 years ago

组件没有被加载之前，组件的样式被提前注入到head内了

vuejs / vue-loader

还未被加载的动态组件，其样式却被提前被注入到页面的head内了 #2018