vue export default

chushiyunen2026-06-13 9:52

文章目录

- - [export default](#export default)
  - - [export default示例](#export default示例)
    - [setup和export default的区别](#setup和export default的区别)
    - [export default导出或setup设置后路由才可使使用对吧?](#export default导出或setup设置后路由才可使使用对吧?)

export default

export default 是默认导出，一个vue文件只能有一个export default。

export default示例

js 复制代码

<script>
  export default {
    name: 'TutorialChapterView',
    data() {
      return {
        tutorial: null,
        chapters: [],
        activeChapterId: null,
        activeChapter: null
      }
    },
    async mounted() {
      const tutorialId = this.$route.params.tutorialId
    },
    methods: {
      async fetchTutorial(tutorialId) {
        try {
          const response = await fetch(`/mysite/api/tutorial/${tutorialId}`, {
            method: 'GET',
            headers: {
              'Content-Type': 'application/json',
            }
          })

          const data = await response.json()

          if (data.success) {
            this.tutorial = data.data
          }
        } catch (error) {
          console.error('Failed to fetch tutorial:', error)
        }
      }
    },
    watch: {
      '$route'(to, from) {
        if (to.params.tutorialId !== from.params.tutorialId) {
          this.tutorial = null
          this.chapters = []
          this.activeChapterId = null
          this.activeChapter = null

          const tutorialId = to.params.tutorialId
          if (tutorialId) {
            this.fetchTutorial(tutorialId)
            this.fetchChapters(tutorialId)
          }
        }
      }
    }
  }
  </script>

setup和export default的区别

setup更优雅，更推荐。

setup有以下优点：

1、无需exportdefault：中顶层声明的变量、函数会自动暴露给模板，无需手动return。

2、响应式数据改造：原来的data属性全部改为ref()，在JS逻辑中读写它们必须加上.value（在模板中则不需要）。

3、生命周期钩子：mounted被替换为onMounted，且需要从vue中显式导入。

4、路由监听：Vue3推荐使用watch函数监听特定的响应式值（如()=>route.params.tutorialId），这比Vue2中监听整个$route对象性能更好、意图更明确。

export default导出或setup设置后路由才可使使用对吧?

这样理解比较片面。

默认导出并不是路由的规则，而是es6的规则，路由只是用到了导入。