ES模块导入、导出学习笔记

1、命名导出、导入

1.1、声明时直接导出

• 导出

/*** 定义一个变量*/
export const src = "我是一个字符串";/*** 定义一个函数*/
export const func = function () {console.log("我是一个函数");
};

• 导入

// 分别导入
import { src, func } from "@/common/index";onMounted(() => {// 打印变量console.log(src, "打印变量");// 调用函数func();
});

1.2、先声明，再导出

• 导出

/*** 定义一个变量*/
const src = "我是一个字符串";/*** 定义一个函数*/
const func = function () {console.log("我是一个函数");
};export { src, func };

• 导入

// 分别导入
import { src, func } from "@/common/index";onMounted(() => {// 打印变量console.log(src, "打印变量");// 调用函数func();
});

2、默认导出

2.1、声明时直接导出

• 默认导出跟命名导出的区别：
  • 默认导出比命名导出多一个default关键字
• 默认导出可以省略函数名
• 导出

/*** 定义一个函数*/
export default function func() {console.log("我是一个函数");
}

• 导入

// 导入默认导出的方法，方法名随便
import func from "@/common/index";onMounted(() => {// 调用函数func();
});

2.2、先声明，再导出

• 导出

/*** 定义一个变量*/
const src = "我是一个字符串";/*** 定义一个函数*/
function func() {console.log("我是一个函数");
}export default { src, func };

• 导入

import common from "@/common/index";onMounted(() => {// 调用变量console.log(common.src);// 调用函数common.func();
});

3、命名导出 VS 默认导出

3.1、命名导出

• 可以导出多个值，并且可以选择性导入，灵活性更好
• 指定了确切的名字，便于代码追踪和维护
• 适合有多个功能的模块

3.2、默认导出

• 简化了单个值的导入和导出，可以让代码更加简洁
• 适合功能单一的模块

1、 命名导出：导入的时候需要花括号（{}）。
2、 默认导出：导入的时候不需要花括号（{}）。

3.3、同时使用

• 导出

export const common = {src: "我是一个字符串",func: function () {console.log("我是一个函数");},
};export default function func2() {console.log("我是一个默认函数2");
}

• 导入

import func2, { common } from "@/common/index";onMounted(() => {// 调用变量console.log(common.src);// 调用函数common.func();// 调用函数func2();
});

4、使用 as 关键字

• 功能：用于重命名导入或导出的值
• 使用场景：解决名称冲突、适用当前上下文，提高可读性

4.1、在 import 中使用 as

• 假设 common 中 func 函数是命名导出

import { func as sayHandle }  from '@/common/index'

• 假设 common 中 func 函数是默认导出

import { default as sayHandle } from '@/common/index'

• 将 module 中的所有导出内容聚合到 module 对象中

import * as module from '@/common/index'// 使用方法
console.log(module.func())

4.2、在 export 中使用 as

function func(name){return `Hello,${name}!`
}export { func as sayHandle }// 或者将 func 函数默认导出
// 和 == export default func == 是一样的效果
export { func as default }

5、动态导入

• 示例1：

import("@/common/index").then((module)=>{console.log(module.func())
})

• 示例2：

const module = await import("@/common/index")
consolg.log(module.func())