vue 的 export default 只能导出一个单一实体（对象、函数或类），不允许导出多个东西。这与模块化的思想有关，目的是简化导入过程并保持代码的清晰度。如果需要导出多个部分，应使用 export 关键字分别导出，导入时使用对应的名称即可。对象虽然内部包含多个属性和方法，但仍算作一个单一的实体，因此也可以使用 export default 导出。选择使用哪种导出方式应根据具体需求和组件复杂性进行权衡，以保持代码的可读性和简洁性。
Vue 中 export default：你真的懂它吗？
很多初学者都会问：Vue 的 export default 能导出多个东西吗？答案是：不能。 但这个问题的背后，藏着对模块化和 Vue 组件导出机制更深层次的理解。 本文就来深入剖析一下。
先说结论：export default 只能导出一个东西。 这“一个东西”可以是一个对象，一个函数，甚至是一个类，但它只能是一个单一的命名出口。 如果你试图导出多个东西，编译器会直接报错。
为什么这么设计？这和模块化思想息息相关。 export default 的用意在于提供一个默认的导出，简化导入过程。 想象一下，如果允许导出多个，那么导入时就需要指定每个导出的名称，这会增加代码的复杂度和冗余。 保持单一导出，让代码更清晰、更易维护。
让我们来看一个例子，错误的示范：
立即学习“前端免费学习笔记（深入）”；
<code class="javascript">// 错误示范：试图导出多个
export default {
data() {
return { message: 'Hello' };
},
methods: {
greet() {
console.log(this.message);
}
},
components: {
// ...
}
};</code>这段代码试图同时导出 data、methods 和 components，这是错误的。 编译器会抛出错误。
BJXShop网上购物系统是一个高效、稳定、安全的电子商店销售平台，经过近三年市场的考验，在中国网购系统中属领先水平；完善的订单管理、销售统计系统；网站模版可DIY、亦可导入导出；会员、商品种类和价格均实现无限等级；管理员权限可细分；整合了多种在线支付接口；强有力搜索引擎支持... 程序更新：此版本是伴江行官方商业版程序，已经终止销售，现于免费给大家使用。比其以前的免费版功能增加了：1，整合了论坛
那么，正确的做法是什么呢？ 我们需要使用 export 关键字，分别导出不同的部分：
<code class="javascript">// 正确做法：分别导出
const data = () => ({ message: 'Hello' });
const methods = {
greet() {
console.log(this.message);
}
};
const components = {
// ...
};
export { data, methods, components };
//或者，更简洁的写法：
export {
data: () => ({ message: 'Hello' }),
methods: {
greet() {
console.log(this.message);
}
},
components: {/*...*/}
};</code>这样，我们就可以分别导入这些部分了。 导入时，需要使用对应的名称：
<code class="javascript">import { data, methods, components } from './myComponent';
// 使用导入的内容
const MyComponent = {
data,
methods,
components,
};</code>你可能会问：那对象呢？ 对象可以包含多个属性和方法，这算不算多个导出？ 是的，但它仍然是一个单一的实体。 export default 导出的对象，其内部的属性和方法在导入后仍然可以通过点号访问。 这和分别导出每个属性和方法是不同的。 前者保持了对象的完整性，后者则将其分解成独立的部分。
选择哪种方式取决于你的具体需求。 如果你的组件结构比较简单，使用 export default 导出一个对象可能更方便。 但如果你的组件非常复杂，或者需要复用其中的部分，那么分别导出各个部分会更好。 这需要根据实际情况进行权衡。
最后，一个经验之谈： 保持代码的简洁性和可读性至关重要。 不要为了追求所谓的“技巧”而写出难以理解的代码。 选择最清晰、最易维护的方式，才是最佳实践。 记住，代码是写给人看的，其次才是机器。
