Vue export & export default & import 总结
Vue export & export default & import 总结
Vue export & export default & import 总结
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