Difference between export and export default

utilization

1.direct output

export let words = 'hello world!!!' 

export function output() { 
// ... 
}

2.Define then output

let firstWords = 'hello'
let secondWords = 'world'
let thirdWords = '!!!'

function output() {
    // ...
}

export {firstWords, secondWords, thirdWords, output}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

Use of default

default is used to specify the default external interface of the module
2. Obviously, there can only be one default external interface, so export default can only appear once in the same module.
default can only be output directly, it cannot be defined and then output.

export default const str = 'hello world'

export default function () {
  console.log('foo');
}

• 1
• 2
• 3
• 4
• 5

Difference between import default and export default in import

1. exportThe output of the system is the same as that of theimportimportation
export function output() {
    // ...
}

import {output} from './example'

2.export defaultThe output of the system is the same as that of theimportimportation
export default function output() {
    // ...
}

import output from './example'

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

As you can see from the above two import methods, the import method of export default does not need to be wrapped in curly braces. The reason is that with export default, there is only one interface, and it provides the default interface of the module, so naturally you don't need to wrap it in curly braces.

Reference Article:
/sherrycat/p/
/fanyanzhao/p/
/zhou_xiao_cheng/article/details/52759632