Vueexport、import、exportdefault详解
Vue export、import、export default详解
⼀.export
⼀个模块就是⼀个独⽴的⽂件。该⽂件内部的所有变量，外部⽆法获取。如果你希望外部能够读取模块内部的某个变量，就必须使⽤export 关键字输出该变量。
⽤法
//输出变量⽤法1
export var firstName ='Michael';
export var lastName ='Jackson';
export var year =1958;
//输出变量⽤法2
var firstName ='Michael';
var lastName ='Jackson';
var year =1958;
export {firstName, lastName, year};
//输出函数⽤法1
export function multiply(x, y){
return x * y;
};
//输出函数⽤法2
function v1(){...}
function v2(){...}
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
//输出类
export default class {...}
错误⽤法
// 报错
export 1;
var m =1;
export m;
/
/上⾯两种写法都会报错，因为没有提供对外的接⼝，两种错误其实都是因为直接输出值了
// 报错
function f(){}
export f;
//以上错误跟上⾯的相同，必须提供的是接⼝
//报错
function foo(){
export default'bar'// SyntaxError
}
foo()
//这种错误是因为export命令必须处于模块顶层才可以，也就是不能出现在代码块⾥⾯，这⾥涉及到import的编译时加载原理，这个稍后会讲
⼆、import
使⽤export命令定义了模块的对外接⼝以后，其他 JS ⽂件就可以通过import命令加载这个模块。
⽤法
// main.js
import {firstName, lastName, year} from './profile';
function setName(element){
}
上⾯代码的import命令，⽤于加载profile.js⽂件，并从中输⼊变量。import命令接受⼀对⼤括号，⾥⾯指定要从其他模块导⼊的变量名。⼤括号⾥⾯的变量名，必须与被导⼊模块（profile.js）对外接⼝的名称相同。如果想为输⼊的变量重新取⼀个名字，import命令要使⽤as 关键字，将输⼊的变量重命名。
import { lastName as surname } from './profile';
（1）提升效果
import命令具有提升效果，会提升到整个模块的头部，⾸先执⾏。
foo();
import { foo } from 'my_module';
上⾯的代码不会报错，因为import的执⾏早于foo的调⽤。这种⾏为的本质是，import命令是编译阶段执⾏的，在代码运⾏之前。
（2）不能使⽤表达式和变量
由于import是静态执⾏，所以不能使⽤表达式和变量，这些只有在运⾏时才能得到结果的语法结构。
// 报错
import {'f'+'oo'} from 'my_module';
// 报错
let module ='my_module';
import { foo } from module;
// 报错
if(x ===1){
import { foo } from 'module1';
}else{
import { foo } from 'module2';
}
上⾯三种写法都会报错，因为它们⽤到了表达式、变量和if结构。在静态分析阶段，这些语法都是没法得到值的。
（3）不重复加载
import { foo } from 'my_module';
import { bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';
上⾯代码中，虽然foo和bar在两个语句中加载，但是它们对应的是同⼀个my_module实例。也就是说，import语句是 Singleton 模式。
（4）同export⼀样的import不能出现在代码块
由于import是编译时加载
三、export default
从前⾯的例⼦可以看出，使⽤import命令的时候，⽤户需要知道所要加载的变量名或函数名，否则⽆法加载。但是，⽤户肯定希望快速上⼿，未必愿意阅读⽂档，去了解模块有哪些属性和⽅法。
为了给⽤户提供⽅便，让他们不⽤阅读⽂档就能加载模块，就要⽤到export default命令，为模块指定默认输出。import语句
/
/ export-default.js
export default function (){
console.log('foo');
}
上⾯代码是⼀个模块⽂件export-default.js，它的默认输出是⼀个函数。
其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from './export-default';
customName();// 'foo'
上⾯代码的import命令，可以⽤任意名称指向export-default.js输出的⽅法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后⾯，不使⽤⼤括号。
export default命令⽤在⾮匿名函数前，也是可以的。
// export-default.js
export default function foo(){
console.log('foo');
}
// 或者写成
function foo(){
console.log('foo');
}
export default foo;
上⾯代码中，foo函数的函数名foo，在模块外部是⽆效的。加载的时候，视同匿名函数加载。
下⾯⽐较⼀下默认输出和正常输出。
/
/ 第⼀组
export default function crc32(){// 输出
// ...
}
import crc32 from 'crc32';// 输⼊
// 第⼆组
export function crc32(){// 输出
// ...
};
import {crc32} from ‘crc32’;// 输⼊
上⾯代码的两组写法，第⼀组是使⽤export default时，对应的import语句不需要使⽤⼤括号；第⼆组是不使⽤export default时，对应的import语句需要使⽤⼤括号。
export default命令⽤于指定模块的默认输出。显然，⼀个模块只能有⼀个默认输出，因此export default命令只能使⽤⼀次。所
以，import命令后⾯才不⽤加⼤括号，因为只可能对应⼀个⽅法。
本质上，export default就是输出⼀个叫做default的变量或⽅法，然后系统允许你为它取任意名字。所以，下⾯的写法是有效的。
// modules.js
function add(x, y){
return x * y;
}
export {add as default};
// 等同于
// export default add;
// app.js
import {default as xxx } from 'modules';
// 等同于
// import xxx from 'modules';
正是因为export default命令其实只是输出⼀个叫做default的变量，所以它后⾯不能跟变量声明语句。
// 正确
export var a =1;
// 正确
var a =1;
export default a;
// 错误
export default var a =1;
上⾯代码中，export default a的含义是将变量a的值赋给变量default。所以，最后⼀种写法会报错。
同样地，因为export default本质是将该命令后⾯的值，赋给default变量以后再默认，所以直接将⼀个值写在export default之后。// 正确
export default42;
// 报错
export 42;
上⾯代码中，后⼀句报错是因为没有指定对外的接⼝，⽽前⼀句指定外对接⼝为default。
有了export default命令，输⼊模块时就⾮常直观了，以输⼊ lodash 模块为例。
import _ from ‘lodash’;
如果想在⼀条import语句中，同时输⼊默认⽅法和其他变量，可以写成下⾯这样。
import _,{ each } from ‘lodash’;
对应上⾯代码的export语句如下。
export default function (obj){
// ···
}
export function each(obj, iterator, context){
// ···
}
export { each as forEach };
上⾯代码的最后⼀⾏的意思是，暴露出forEach接⼝，默认指向each接⼝，即forEach和each指向同⼀个⽅法。
export default也可以⽤来输出类。
// MyClass.js
export default class {...}
// main.js
import MyClass from 'MyClass';
let o = new MyClass();
总结：
ES6是未来，虽然现在很多浏览器都还不⽀持（现在可以通过babel将es6转成es5），但是有些很好的框架已经运⽤es6语法了，⽐如Vue，所以了解es6语法还是很有必要的。⽐如Vue组件化开发就采⽤export default去构建⼀个组件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。