Vue の export default と import

Vue の勉強中です。

export default ってどういう意味なのか分からなくてググったらこちらの記事に紹介されていたのですが、いまいち理解できなくて自分でも試してみました。
export default ってなに？ - Qiita

気になるところ

export にはいろいろな書き方があります。
export | MDN

関数名を指定して export する次のような例は直感的に分かります。

export { func1, func2 }

function func1() {
    console.log('module1 の func1 です。')
}

function func2() {
    console.log('module1 の func2 です。')
}

別のモジュール（ファイル）で import するときも次のように関数名を指定します。

import { func1 ,func2 } from './module1.js'

今回気になったのは次のような書き方です。

export default function() {
    console.log('module1 の 無名関数 です。')
}

この default を指定することにより、どのようなことがおきるのでしょうか？

答え

※ 自分なりの考え方なので厳密ではありません。
　
　
「default でエクスポートした関数は自動で「default」という名前が付けられ、しかも import 時にその名前を省略できます。」
　
　
先ほどの default 付きで export した無名関数をインポートして「func3」という変数に格納するときは通常、次のようにします。

import func3 from './module1.js'

　
上記 import 文はいろいろ省略されており、次のように長く書くと分かりやすいのではないでしょうか？

import { default as func3 } from './module1.js'

当然ですが default で export できる関数はモジュール（ファイル）内で 1 つだけです。（「default」という関数名が被ってしまいます。）
　
　

まとめ

もう default 怖くない。
　
勉強しながらチュートリアル作りました。ご利用ください。
www.shookuro.com

これで勉強いています。

基礎から学ぶ Vue.js

最近発売されたこれも欲しい。

Vue.js入門 基礎から実践アプリケーション開発まで