学习Vue你不得不知道的export和import知识

新手学习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