在 vue 组件中，export default 语句用于导出组件对象，它不定义 computed 属性。computed 属性在导出的对象中定义，与其他属性平级。它们依赖于响应性系统，当依赖的属性改变时，computed 属性自动更新。优化 computed 属性的性能时，应避免异步操作和复杂的逻辑处理。
Vue组件中export default与computed的那些事儿
很多同学在用Vue写组件的时候，对export default里怎么配置computed属性一头雾水，甚至觉得它很神秘。其实，一点也不神秘，它只是Vue组件的一个导出方式，和computed属性的定义方式结合起来用而已。本文就来扒一扒这其中的道道，让你彻底明白它的用法，以及一些潜在的坑。
先说结论：export default只是个导出语句，它本身不定义computed。computed的定义还是在export default导出的对象里，就像定义其他属性一样。
基础知识：温故而知新
咱们先回顾一下Vue组件的基本结构和computed属性。一个Vue组件通常包含data、methods、computed、watch等属性，这些属性定义了组件的数据、方法、计算属性和监听器等等。export default的作用是将这个组件对象导出，以便在其他地方导入和使用。
立即学习“前端免费学习笔记（深入）”；
核心：computed在export default中的位置
一个典型的Vue组件结构，使用export default导出：
<code class="javascript">export default {
name: 'MyComponent',
data() {
return {
count: 0
};
},
computed: {
doubleCount() {
return this.count * 2;
}
}
};</code>你看，computed属性就老老实实地放在export default导出的对象里，和data、name这些属性平起平坐。 doubleCount这个计算属性依赖于count，当count变化时，doubleCount会自动更新。 这才是关键，理解了这一点，其他的都迎刃而解。
深入：工作原理及细节
Vuex是一个专门为Vue.js应用设计的状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更。它可以与 Vue 官方开发工具扩展(devtools extension) 集成，提供高级特征，比如 零配置时空旅行般（基于时间轴）调试，以及状态快照 导出/导入。本文给大家带来Vuex参考手册，需要的朋友们可以过来看看！
Vue的响应式系统会追踪computed属性的依赖。当依赖的数据发生变化时，Vue会自动重新计算computed属性的值，并更新视图。这个过程是Vue内部自动完成的，我们无需手动干预。 这其中的实现细节涉及到Vue的依赖收集和更新机制，这部分内容比较复杂，但理解其自动更新的特性就足够了。
进阶：更复杂的场景
我们可以定义多个computed属性，甚至在computed属性中使用其他computed属性：
<code class="javascript">export default {
// ... other properties ...
computed: {
doubleCount() {
return this.count * 2;
},
quadrupleCount() {
return this.doubleCount * 2; // 使用另一个computed属性
}
}
};</code>这里quadrupleCount依赖于doubleCount，当count变化，doubleCount更新，quadrupleCount也会随之更新。 这种依赖关系的处理，是Vue响应式系统的一个重要体现。
踩坑指南：常见问题与解决方案
-
this指向问题: 在computed属性中，this指向当前组件实例。如果在computed属性中使用了箭头函数，this的指向可能会发生变化，这在某些情况下可能会导致错误。 建议尽量避免在computed中使用箭头函数。 -
异步操作:
computed属性不适合进行异步操作。如果需要进行异步操作，应该使用methods中的方法。 这是因为computed属性依赖于响应式系统，而异步操作的返回值无法被响应式系统追踪。 -
性能优化: 对于计算量很大的
computed属性，可以考虑使用缓存机制来提高性能。Vue本身会对computed进行缓存，但对于极其复杂的计算，可以考虑手动缓存中间结果。
最佳实践：简洁高效的代码
保持代码简洁易读非常重要。 避免在computed属性中进行复杂的逻辑处理，尽量将复杂的逻辑放到methods中，computed只负责简单的计算和数据转换。 这能提高代码的可维护性和可读性，并且更容易调试。
总而言之，export default只是个语法糖，关键在于理解computed属性在组件中的作用和使用方法，以及一些潜在的坑。 熟练掌握这些，就能写出更优雅、更高效的Vue组件代码。
