export 与 export default 区别

Vicky ·

更新时间:2024-11-10

· 523 次阅读

vue模块化机制

vue是通过 webpack 实现模块化的前端框架，那什么是 webpack ， webpack可以看成是模块打包机，它的工作是：把你的项目当做一个整体，通过一个给定的文件(如 index.js)，webpack将从这个文件开始找到项目的所有依赖文件，并处理它们，打包成一个或多个浏览器可识别的JS文件。看一下webpack官网的图片，意思大致就是：打包所有模块依赖，生成静态文件。

export 和 export default

一个模块就是一个文件，一个模块内部的变量，文件外部无法获取，如果需要文件外部获取到内部的变量，就需要将文件内的变量进行输出，也就是 export，export可以用来输出多个模块，而且是可以命名的。

//demo1.js
const str = "Hello World!";
function f(a) {
    return a + 1;
}
export {
    str, f
}

//demo2.js
//引入 demo1.js 文件中的变量与方法
import { str, f } from 'demo1';

如果想为输入的变量重命名，需要使用 as 关键字对输入的变量重命名。

//demo2.js
import { str as str1, f as fun } from 'demo1';

export default 也是用来导出模块，可以在例如 vue 这种单组件文件的项目中使用，通常需要导出一个对象，以便在需要的地方 import

//demo1.js
export default {
    data() {
        return {
            str: "",
        }
    },
    methods: {
        printStr() {
            console.log(this.str);
        }
    }
}

//demo2.js
import demo1 from 'demo1';

export 与 export default 的区别是：

export 可以导出多个有名字的模块，import 的名称必须与export 的模块名称相同；而 export default 只可以导出一个默认的模块，是匿名的。 import export 模块的时候，需要使用 { }，而 import export default 模块的时候，直接 import 即可。 export default 命令输出模块时，一个模块只能有一个输出，因此 export default 只能使用一次，所以 import 时不需加 { }，因此只可能唯一import 默认输出模块。