vue export default

文章目录export defaultexport default示例setup和export default的区别export default导出或setup设置后路由才可使使用对吧?export defaultexport default 是默认导出一个vue文件只能有一个export default。export default示例scriptexportdefault{name:TutorialChapterView,data(){return{tutorial:null,chapters:[],activeChapterId:null,activeChapter:null}},asyncmounted(){consttutorialIdthis.$route.params.tutorialId},methods:{asyncfetchTutorial(tutorialId){try{constresponseawaitfetch(/mysite/api/tutorial/${tutorialId},{method:GET,headers:{Content-Type:application/json,}})constdataawaitresponse.json()if(data.success){this.tutorialdata.data}}catch(error){console.error(Failed to fetch tutorial:,error)}}},watch:{$route(to,from){if(to.params.tutorialId!from.params.tutorialId){this.tutorialnullthis.chapters[]this.activeChapterIdnullthis.activeChapternullconsttutorialIdto.params.tutorialIdif(tutorialId){this.fetchTutorial(tutorialId)this.fetchChapters(tutorialId)}}}}}/scriptsetup和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的规则路由只是用到了导入。