Экспорт экспортирует переменные! ! ! это переменная! ! !

JavaScript

В первую очередь рекомендуется внимательно изучитьСинтаксис модуля для начала работы с es6.

Я хотел бы отметить относительно важные моменты:

  • Каждый файл 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 {a}, так что все здесь{a}, и потому чтоexport defaultтакжеexport, так что все по существу{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 изменяется также a файла b, поскольку экспорт является переменной 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, независимо от того, что произойдет с файлом позже.

потому что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;

Есть ли импорт{}разница

При использовании экспорта по умолчанию соответствующий оператор импорта не требует фигурных скобок.
При использовании экспорта соответствующий оператор импорта требует фигурных скобок.

// 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")
}
Категории