Vue export & export default & import 总结

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