Vue export & export default & import 總結
by:授客 QQ：1033553122
1. 實踐環境
Vue 2.9.6
2. 簡介
在ES6中，export與export default均可用於導出變量(含常量)、函數、類、文件、模塊等，然后在其它文件或模塊中通過import 變量(含常量)|函數|類|文件|模塊名的方式，將其導入，以便能夠對其進行使用。
3. export & import
一個模塊就是一個獨立的文件，該文件內部的內容，外部無法獲取。如果希望外部能夠讀取模塊內部的內容，比如某個變量，就必須使用export關鍵字導出該變量，然后在其它模塊中通過import方式導入使用。
假設module1.js和module2.js在同一個目錄下。
導出\導入變量
// module1.js
export var author = "shouke"
export var addr = "sz"
// 等價寫法
var author = "shouke"
var addr = "sz"
export { author, addr }
// module2.js
// 導入變量
import { author, addr } from "./module1"
// 也可以分開寫
import { author } from "./module1"
import { addr } from "./module1"
// 引用變量
let temp = "addr of " + author + " is " + addr
console.log(author) // 輸出 "shouke"
console.log(addr) // 輸出 "sz"
console.log(temp) // "輸出 addr of shouke is sz"
--------------------------------------------------------
// module1.js
var addr = "sz"
// 按別名導出
export { addr as address}
// module2.js
// 導入變量
import { address } from "./module1"
--------------------------------------------------------
// module1.js
var addr = "sz"
export { addr }
// module2.js
//使用as關鍵字給導入的變量重新取一個名字
import { addr as address } from "./module1"
console.log（ myaddr)
注意：
1) 上面代碼在export命令后面，使用大括號指定所要導出的一組變量、函數。它與前一種寫法（直接放置在var語句前）是等價的，但是應該優先考慮使用這種寫法。因為這樣就可以在腳本尾部，一眼看清楚導出了哪些變量。
2) import命令接受一對大括號，里面指定要從其他模塊導入的變量名。大括號里面的變量名，必須與被導入模塊（例中為module1.js）中導出的變量名稱相同。
3) import后面的from指定模塊文件的位置，可以是相對路徑，也可以是絕對路徑，.js后綴可以省略。如果只是模塊名，不帶有路徑，那么必須有配置文件，告訴 JavaScript 引擎該模塊的位置。
常見的 import xxx from "@/someDir/someModule"，這里 @ 默認代表 src目錄，之所以這樣，是因為在build/webpack.base.conf.js文件中做了對應配置，如下
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
4) import命令具有提升效果，會提升到整個模塊的頭部，在編譯階段，在代碼運行之前執行的
5) 如果多次重復執行同一句import語句，那么只會執行一次，而不會執行多次。
6) import命令導入的變量都是只讀的，不能對它進行修改。
import { addr } from "./module1"
addr = "other" // 報錯 "addr" is read-only，import 命令導入的變量都是只讀的，不能對它進行修改
當如，如果導入的是一個對象，則可以更改對象的屬性
import {object} from './xxx.js'
object.atrr = 'hello'; // 合法操作
上面代碼中，object的屬性可以成功改寫，並且其他模塊也可以讀到改寫后的值。不過，這種寫法很難查錯，建議凡是輸入的變量，都當作完全只讀，輕易不要改變它的屬性。
7) export命令可以出現在模塊的任何位置，只要處於模塊頂層就可以
導出\導入函數
// module1.js
export function myfunc() {
console.log("run myfunc");
}
// 等價寫法
function myfunc() {
console.log("run myfunc");
}
export { myfunc }
// module2.js
// 導入函數
import { myfunc } from "./module1"
// 調用函數
myfunc()
--------------------------------------------------------
// 按別名導出
// module1.js
function myfunc() {
console.log("run myfunc");
}
export { myfunc as func}
// module2.js
// 導入函數
import { func } from "./module1"
// 調用函數
func()
--------------------------------------------------------
// module1.js
export function myfunc() {
console.log("run myfunc")
}
// module2.j
//使用as關鍵字給導入的函數重新取一個名字
import { myfunc as func } from "./export"
func()
整體導入
import使用星號（*）指定一個對象，所有輸出值都加載在這個對象上面。
// module1.js
function myfunc1() {
console.log("run myfunc1")
}
function myfunc2() {
console.log("run myfunc2")
}
export { myfunc1, myfunc2}
// module2.js
// 整體導入
import * as myfunc from "./module1"
// 函數調用
myfunc.myfunc1()
myfunc.myfunc2()
4. export default && import
從前面的例子可以看出，使用import命令的時候，用戶需要知道所要加載的變量名或函數名，否則無法加載。
為了給用戶提供方便，讓他們不用閱讀文檔就能加載模塊，就要用到export default命令，為模塊指定默認輸出。
// module1.js
export default function () {
console.log("run myfunc")
}
// module2.js
// import customName from "./export"
// customName()
import func from "./export"
func()
// export defualt 也可以用於非匿名函數
// module1.js
export default function myfunc() {
console.log("run myfunc")
}
// 或者
function myfunc() {
console.log("run myfunc")
}
export default myfunc
-----------------------------------------
//export default和export同時使用
// module1.js
export function func() {
console.log("run func")
}
function myfunc() {
console.log("run myfunc")
}
export default myfunc
// module2.js
import myfunc, { func } from "./export"
func()
myfunc()
如上，模塊文件module1.js的默認導出是一個匿名函數。其它模塊使用import命令加載該模塊時，可以為該匿名函數指定任意名稱。
需要注意的是，導出模塊使用了export default時，導入模塊import命令后面，不使用大括號。
上面代碼中，myfunc函數的函數名myfunc，在模塊外部是無效的。加載的時候，視同匿名函數加載。
export default命令用於指定模塊的默認輸出。顯然，一個模塊只能有一個默認輸出，因此export default命令只能使用一次。所以，import命令后面才不用加大括號，因為只可能唯一對應export default命令。
本質上，export default就是輸出一個叫做default的變量或方法，然后系統允許你為它取任意名字。所以，下面的寫法是有效的。
// modules.js
function add(x, y) {
return x * y;
}
export {add as default};
// 等同於
// export default add;
// app.js
import { default as foo } from 'modules';
// 等同於
// import foo 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 default 42;
// 報錯
export 42;
上面代碼中，最后一句報錯是因為沒有指定對外的接口，而前一句指定對外接口為default。
5. import()
import()函數用於完成動態加載。
import(specifier)
參數specifier，指定所要加載的模塊的位置。import命令能夠接受什么參數，import()函數就能接受什么參數，兩者區別主要是后者為動態加載。
import()函數可以用在任何地方，不僅僅是模塊，非模塊的腳本也可以使用。它是運行時執行，也就是說，什么時候運行到這一句，就會加載指定的模塊。 import()類似於 Node 的require方法，區別主要是前者是異步加載，后者是同步加載。
6. 參考鏈接
http://es6.ruanyifeng.com/?search=import&x=0&y=0#docs/module#export-default-%E5%91%BD%E4%BB%A4