vue中 export default 与 export 写法的区别

1、export default 用法

1.1、定义函数

d.js

const a = [{name:''张三"}]
const b = [{name:''李四"}]
export default {
    a,
    b  
}

1.2、使用

a.js

import dic from './d'   // 在一个文件中，只能导入一次

export function test() {
  console.log('dic',dic,dic.a)
}

export default 命令用于指定模块的默认输出。一个模块只能有一个默认输出，因此 export default 命令 只能使用（导入）一次

2、export 用法

2.1、定义函数

d.js

export const a = [{name:''张三"}]
export const b = [{name:''李四"}]

2.1、使用

1）使用方法1：一次性导入所有函数

a.js

import * as dic from './d'   // * 表示一次导入所有的函数。as 表示起别名

export function test() {
  console.log('dic',dic,dic.a)
}

这种写法 test() 输出的 dic对象与 export default 是一样的，但是区别是这里的dic是module对象，export default 的 dic 是正常对象 。

2）使用方法2：按需导入函数，使用 大括号

export 方式定义的函数，使用时，只想导入需要的函数时，要使用 大括号 。可以分多次导入。

a.js

import {a} from './d'  // 使用大括号，只导入需要的函数，可以分多次导入
import {b} from './d' 

export function test() {
    console.log('dic-a',a)
}
export function test2() {
    console.log('dic-b',b)
}

3、总结

• 定义时：
  export default 定义函数时，只能出现一次；export function 可以出现多次，不限次数。

• 使用时：
  导入 export default 定义函数时，只能导入一次。
  导入 export function 定义函数时，可以一次，也可以多次，不限次数。

• 大括号：
  第一组 export default ，对应的 import 语句不需要使用大括号；
  第二组 export function ，对应的 import 语句 需要使用大括号。

• 导入次数
  export default 命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此 export default 命令只能使用一次，因此 import 命令后面才不用加大括号。
  export function 即可以一次性全部导入，也可以按需导入。如果是按需导入时要使用大括号。