Detailed explanation of the export default command in ES6

We know when learning VUE export default{} It is indispensable, but we must understand its meaning.

export default{}This is used when reusing components.Suppose we write a single page component A file and need to use it in another file B, then we need to use the import/export syntax of ES6 to define the output interface export in file A, import in file B , use the introduced components, so that component A can be reused to cooperate with file B to generate an html page.

To deepen the impression, I will summarize it here as follows

When using the import command, the user needs to know the variable name or function name to be loaded, otherwise it will not be loaded. However, users definitely want to get started quickly and may not be willing to read the documents and understand the properties and methods of the module.In order to provide convenience to users and allow them to load modules without reading documents, they need to use the export default command to specify the default output for the module.。
1. Basic usages such as

//export-default.js This is a module fileexport-default.js, its default output is a functionexport default function () {
  console.log('foo');
}

//import-default.js
import customName from './export-default';
customName();  //'foo'
//This isimportCommands, can be pointed to by any nameexport-defaultFor the method of outputting .js, you do not need to know the function name outputted by the original module.
 It should be noted that at this timeimportAfter the command, no braces are used.

When other modules load the module, the import command can specify any name for the anonymous function.

2. The export default command is used before non-anonymous functions.

// 
export default function foo() {
  ('foo');
}

// Or write it

function foo() {
  ('foo');
}

export default foo;
//In the above code, the function name of the foo function is invalid outside the module.  When loading, it is considered anonymous function loading.

3. The difference between export add default and add

// Group 1
 export defaultfunctioncrc32() { // Output
   //...
}
import crc32 from 'crc32'; // Input


 // The second group
 exportfunctioncrc32() { // Output
   //...
};
import {crc32} from 'crc32'; // Input

The first group is when using export default, the corresponding import statement does not need to use braces;
The second group is that when the export default is not used, the corresponding import statement needs to use braces.
The export default command is used to specify the default output of the module. Obviously, a module can only have one default output, so the export default command can only be used once. Therefore, there is no need to add braces after the import command, because only the corresponding export default command is possible.

4. Export default is to output a variable or method called default, and the system allows you to give it any name.

//correctexport var a = 1;

//correctvar a = 1;
export default a;

//mistakeexport default var a = 1;
//In the above code,export defaultThe meaning of a is to assign the value of variable a to variabledefault.  Therefore, the last way of writing will cause an error.

5. Because the essence of the export default command is to assign the subsequent value to the default variable, you can directly write a value after the export default

// correct
export default 42;

// Error The reason for this sentence is that the external interface is not specified, while the previous sentence specifies that the external interface is default.
export 42;

6. Export default command is very intuitive when entering the module. Take the input of the lodash module as an example.

import _ from 'lodash';

If you want to enter the default method and other interfaces in an import statement, you can write it as follows

import _, { each, each as forEach } from 'lodash';

The export statement corresponding to the above code is as follows.

export default function (obj) {
  // ···
}

export function each(obj, iterator, context) {
  // ···
}

export { each as forEach };//Expose the forEach interface, which points to each interface by default, that is, forEach and each point to the same method.

7、export default can also be used to output classes

// 
export default class { ... }

// 
import MyClass from 'MyClass';
let o = new MyClass();

For details, please refer to the reference address/?search=import&x=0&y=0#docs/module#export-default-%E5%91%BD%E4%BB%A4