export导出的是变量！！！是变量！！！

首先，建议仔细看看es6 入门的 module 语法。

我想说说相对重要的点：

• 每一个 js 文件相互独立，是一个单独的module，输出用export，输入是import
• export导出的是变量
• export default导出的是一个具体的值
• export var a=1至关于var a=1;export { a }
• export default 1至关于var a=1;export { a as default}，一个module只能有一个default
• export和import只能出如今顶级做用域
• 用as能够重命名变量
• import的变量会变量提高，也就是无论写在哪，总会最早被解析
• import {a,b} from './a'，export出去的结构是{a,b}，因此相应的import用的也是{a,b}
• import a from './a'，export default导出的是一个值，import的时候能够将值赋值给任意一个变量，a/b/c等都行
• import * as all from './a'，将 a 里面全部的 export 都拿到，由于export {a}，因此这里的 all 就是{a}，且由于export default也是一种export，因此 all 实质上是{a,default}
• import来的变量，由于是别人家的变量，因此只能读，不能写
• export {a} from './a'这句至关于import {a} from './a';export {a}

export导出的是变量

export导出的是变量，我我的以为一旦理解这句，基本都不太会混淆使用了

这句怎么理解呢，举个例子

// a.js
var a = 1;
setInterval(() => {
  a++;
}, 500);
export { a };

// b.js
import { a } from "./a";
// a会跟随a文件的变化
setInterval(() => {
  console.log(a);
}, 500);
复制代码

由于 a 是 a 文件的变量，当 a 的值变化的时候，b 文件的 a 一样变化了，由于 export 出的是一个变量 a,而不是写死的 a 的值

由于export导出的是变量

因此能够有如下写法

export var a = 1;
export function fn() {}
// 或者
export { a, fn };
// 若是想屡次导出一个变量，能够将变量重命名，相同名字的只能有一个哈
export { a as a1, a as a2 };
复制代码

因此不能如下写法

export 1
var a = 1
// 这句至关于 export 1
export a
复制代码

export default导出的是值

这句怎么理解呢，举个相似上面的例子

// a.js
var a = 1;
setInterval(() => {
  a++;
}, 500);
export default a;

// b.js
// 没有{},就是export default的值，这里能够将值赋值给任意变量，不必定非得a
import a from "./a";
// a不会随着a文件而变化
setInterval(() => {
  console.log(a);
}, 500);
复制代码

由于export default出去的是一个具体的值，一个写死的值，这里就是 1，管他 a 文件后来怎么样呢

由于export default导出的是变量

因此能够有如下写法

export default 1;
export default function fn() {}
// 或者
var a = 1;
export default a;
// 或者
var a = 1;
export { a as default };
复制代码

因此不能如下写法

export var a = 1;
复制代码

import 有没有{}的区别

使用 export default 时，对应的 import 语句不须要使用大括号。
使用 export 时，对应的 import 语句须要使用大括号。

// a.js
var a = 1;
var b = 2;
export { a };
export default b;

// b.js

import { a } from "./a";
import b from "./a";
import * as all from "./a";
// 能够看看这里的all，{a:1,default:2}，加深对default的理解
console.log(all);
// 注意，这里的b实际上是至关于 在这里var b= 2，是b文件本身的变量，能够随意赋值
b = 1;
// a是a文件的变量，不可修改，只能a文件本身改，如下这句会报错
a = 333;
复制代码

export from 何时用

我说个应用场景，读者能够触类旁通~

项目里请求的接口不少，放在一个文件里太长，也难以维护，通常会以功能模块划分。

如今有个api的文件夹，index.js是将全部的接口转出去，还有project.js task.js。

// project.js
export const add = () => axios.post(...)
export const remove = () => axios.post(...)

// task.js
export const add = () => axios.post(...)
export const remove = () => axios.post(...)

// index.js
export * as project from 'project';
export * as task from 'task';

// 在组件使用的时候
import api from './api'
api.project.add()

// 固然通常为了方便使用会在main.js那边将其挂载在全局
// main.js
import api from './api'
Vue.prototype.$api = api
// 组件使用的时候
this.$api.project.add()
复制代码

import()

es2020 的提案，import('./a')能够在须要的时候加载某个模块，好比点击按钮的时候加载等等，一种懒加载的机制。
webpack 已经实现了，因此在vue-router里可使用这样懒加载一个页面。

{
  path: "/m",
  name: "m",
  component: () => import(/* webpackChunkName: "m" */ "../views/M.vue")
}
复制代码