vue3如何组织代码，让代码更清晰易读？

Question

虽然vue3能够把相关的代码写在一起，但是感觉所有代码都在同一层级，除了增加换行、增加region折叠外，寻找起代码来还是很痛苦，尤其是并不是总能清晰地按相关度分隔。请教各位大佬，你们是如何做的？

Answer 1

一般来说就是把相关的功能维护在一起，就是下面这张图那样：

另外就是超过 600行 的 Vue 组件都可以继续往下拆分:

• 可以是单纯的拆分业务代码为单个的JS文件；
• 也可以是继续拆分成子组件，让组件职能尽量单一。

这样虽然会造成一定负担，具体得看你的取舍。

Answer 2

用组合式函数，也就是 hook

抽取组合式函数不仅是为了复用，也是为了代码组织。随着组件复杂度的增高，你可能会最终发现组件多得难以查询和理解。组合式 API 会给予你足够的灵活性，让你可以基于逻辑问题将组件代码拆分成更小的函数：

<script setup>
import { useFeatureA } from './featureA.js'
import { useFeatureB } from './featureB.js'
import { useFeatureC } from './featureC.js'

const { foo, bar } = useFeatureA()
const { baz } = useFeatureB(foo)
const { qux } = useFeatureC(baz)
</script>

在某种程度上，你可以将这些提取出的组合式函数看作是可以相互通信的组件范围内的服务。
https://cn.vuejs.org/guide/reusability/composables.html#extra...