Vue中export和export default的区别

在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，export default仅有一个。

export的导出与import引入

export function output() { ... }  // 导出
import {output} from './example'  // 引入

export default的导出与import引入

export default function output() { ... }   // 导出
import output from './example'  // 引入

说白了，它其实是别名的语法糖：as取一个别名

export default function() {}
 
// 等效于：
function a() {};
export {a as default};

import a from './d';
 
// 等效于，或者说就是下面这种写法的简写，是同一个意思
import {default as a} from './d'

这个语法糖的好处就是import的时候，可以省去花括号{}。简单的说，如果import的时候，你发现某个变量没有花括号括起来（没有*号），那么你在脑海中应该把它还原成有花括号的as语法。