最近很火的Vue Vine是如何实现一个文件中写多个组件

文章预览

前言 在今年的Vue Conf 2024大会上，沈青川大佬（维护Vue/Vite 中文文档）在会上介绍了他的新项目Vue Vine。Vue Vine提供了全新Vue组件书写方式， 主要的卖点是可以在一个文件里面写多个vue组件 。相信你最近应该看到了不少介绍Vue Vine的文章，这篇文章我们另辟蹊径来讲讲Vue Vine是如何实现在一个文件里面写多个vue组件。 看个demo 我们先来看普通的vue组件， about.vue 代码如下：    i am about page "ts" setup> 我们在浏览器中来看看编译后的js代码，代码如下： const _sfc_main = {}; function  _sfc_render(_ctx, _cache) {    return  _openBlock(), _createElementBlock( "h3" , null,  "i am about page" ); } _sfc_main.render = _sfc_render; export  default _sfc_main; 从上面的代码可以看到普通的vue组件编译后生成的js文件会 export default 导出一个 _sfc_main 组件对象，并且这个组件对象上面有个大名 ………………………………