export和export default的区别

这两者的区别是，export {变量}导出的是一个变量的引用，export default{}导出的是一个值

什么意思呢，就是说在页面中使用import导入这2个变量后，在module.js中因为某些原因x变量被改变了，那么会立刻反映到页面中，而module.js中的y变量改变后，页面中的y还是原来的值

// module.js

let x = 10;
let y = 20;
setTimeout(() => {
    x = 100;
    y = 200;
}, 1000);
export {x};
export default {y};

// about.vue

 

<template>
    <div class="about-wrap">
        <button type="button" @click="clickMe">1</button>
    </div>
</template>
<script>
import {x} from './module';
import y from './module';
export default {
    components: {
        x, y
    },
    mounted() {
        console.log(x); // 10
        console.log(y); // 20
    },
    methods: {
        clickMe() {
            console.log(x); // 100
            console.log(y); // 20
        }
    }
};
</script>