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")
}
複製代碼