新手學習VUE的時候會遇到很多的難題，今天要說的就是export和import這兩個常用的關鍵字。
我剛開始看到這兩個東西的時候也不知所云，那麼今天就把我學習是VUE的時候學習export和import的筆記分享給大家：
export和import 說明：
export和import 本是ES6中的兩個語法點，其作用就是字面意思，導入導出，但是爲何要用他們做導入導出你看完下面的知識點你就明白 。
1、ES6中的export 和 import
ES6中的export 和 import一般有兩種用法
1)、命名導出：(Named exports)
就是每一個需要導出的數據類型都需要有一個name,統一引入一定要帶有｛｝，即便只有一個需要導出的數據類型，這種寫法清爽直接，是推薦的寫法
舉例：
//------ lib.js ------
const sqrt =Math.sqrt;
function square(x){
return x*x;
}
function diag(x, y) {
return sqrt(square(x) + square(y));
}
expor{sqrt,square,diag}
在main.js中引入
------------main.js-----------------
import {square,diag} from ‘lib’;
如果是把export 直接加入到聲明前面就可以省略{}
//------ lib.js ------
export const sqrt=Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
導入
//------ main.js ------
import { square, diag } from ‘lib’;
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
無論怎麼導出的，導入都需要加｛｝
2、別名引入(Aliasing named imports)
當從不同的文件引入的變量名相同的時候，就需要引入別名
import {speak} from ‘./cow.js’
import {speak} from ‘./goat.js’
這樣的寫法是會引發歧義的。這個時候需要用到別名來對引入進行區分
import {speak as cowSpeak} from ‘./cow.js’
import {speak as goatSpeak} from ‘./goat.js’
關鍵字是AS ，但是這樣的操作也存在一定的弊端，當需要引入的文件很多的時候，這樣的寫法就會顯得十分的 冗長繁瑣。
解決辦法：
這個時候就有命名空間橫空出世了。。命名空間的引入：（Namespace import）
import * as cow from ‘./cow.js’
import * as goat from ‘./goat.js’ 這樣就省略掉了｛｝讓代碼更加簡潔和大方
cow.speak() // moo
goat.speak() // baa
2)、默認導出：(Default exports)
默認的導出跟普通的導出最大的區別就在於，默認導出的時候不需要name這個屬性了。 原本的導出是這樣的exports {name1,name2} 現在的導出是這樣的:
//------ myFunc.js ------
export default function () { … };
導入：
//------ main1.js ------
import myFunc from ‘myFunc’;
myFunc();
但是：每一個js只能存在一個默認的export default
其實這種導出方式可以看成是命名的變種，只不過是把命名（name）.
雖然export default 只能有一個，但是也能導出多個方法
例子：
export default {
speak(){
return “moo”;
},
eat (){
return “cow eates”;
}
drink(){
return “cow drinks”;
}
}
引入:
import cow from “./default-cow.js”
import goat from ‘./default-goat.js’
cow.speak() // moo
goat.speak() // baa
如果我們在編寫模塊的時候使用的導出方法不統一，那麼引入的時候就需要考慮不同模塊引入的方式，
編寫兩種引入方式通用的模塊
import * as myself from ‘./ambidextrous-cow.js’ // import this file into itself
// this module’s own namespace is its default export
export default myself
export function speak () {
console.log(‘moo’)
}
這個 時候引入就不需要考慮引入的方式了：
import cow from ‘./ambidextrous-cow’
import * as alsocow from ‘./ambidextrous-cow’
cow.speak() // moo
alsocow.speak() // moo
兩種引入方法均可。
這種方法也有一個小缺點，就是在我們編寫的模塊中，有一個function是常用的，我們想默認導出，可export default已經使用了，而我們知道export default在一個模塊中只能使用一次。這時就要使用Object.assign
import * as myself from ‘./ambidextrous-cow.js’
export default Object.assign(speak, myself)
export function speak () {
console.log(‘moo’)
}
但是需要 注意的是，Object.assign 只能用於function
import cow from ‘./ambidextrous-cow’
import * as alsocow from ‘./ambidextrous-cow’
cow() // moo
cow.speak() // moo
alsocow.speak() // moo