Vue.js の export default は複数指定可能？

Question

疑問

javascriptの「export」と「export default」の違いは、
exportは複数指定できるが、
export defaultは一つだけ
だと書いてあるサイトがありましたが、
vueの公式サイトでは複数指定していました。

javascriptとvue.jsでは仕様が変わってくるのでしょうか？

該当のソースコード

元url:https://ja.vuejs.org/guide/introduction.html#api-styles

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event handlers in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

私の解釈

オブジェクトと判断して、
{　}を一つだと認識している？

回答よろしくお願いいたします。

Answer 1

このページをVueに読み替えれば解釈できるのではないかと思われます。参照先はReactでのたとえですが、JSフレームワークに越したことはないので。

export defaultってなんだろう

指摘どおりexport default の後にあるものは{…}オブジェクトです。そこにVueの制御にひととおり必要なメソッドや変数定義を格納しているのです。それをプロジェクト名（一般的にはapp）として呼び出すためにexport defaultにしているわけです。

そう解釈していくと複数指定はできない仕様なのもわかると思います。それを許せばimport先がどっちを指定していいか混乱してしまいますので。

Comments

[RAKUDA]

難しく考えずに、「defaultに続くオブジェクトに名前を付けて、まるっとimportする」ってかんじでイメージするようにします。

[RAKUDA]

ありがとうございました。