说明

• 拆分基于页面关注点
• 可以快速查找

举例

页面

图例

代码

index.vue

<template>
  <div class="left">
    <!-- useAvatar.ts 请求头像数据 -->
    <Avatar />
    <Article />
    <!-- useBackMenu.ts 显示菜单数据 -->
    <BackMenu />
  </div>
  
  <div class="right">
    <div>
      <span>文章</span>
      <span>草稿箱(1)</span>
       <Search /> 
    </div>
    <div>
      <!-- useArticleList.ts 文章列表 -->
       <component v-bind:is="ArticleList" />
       <!-- useDraftList.ts  -->
       <component v-bind:is="DraftList" />
    </div>
  </div>
</template>

分析

• index.vue 入口文件
• useIndex.ts 处理传输过来的数据
• 其中 逻辑和页面 两大模块的文件全部在 index.vue 引入
• 页面数据传递可在index.vue <script setup lang="ts"> 中返回或者传入到其他文件, 复杂数据可以通过 store 处理

总结

• 页面文件和逻辑文件的数量是不等的,比如 Search 文件可能根据类型是查询不同的列表
• 结构是两层的即 index.vue 和其他文件[逻辑和子页面], 不建议在子页面去引入逻辑, 统一在 index.vue 引入逻辑
• 子页面需要请求数据一般在 index.vue 上引入子页面逻辑, 不需要请求数据的直接在子页面 script 完成即可
• 名称需要规范 如下:

- model
    - useZi.ts
    - useIndex.ts
- index.vue
- Zi.vue

# index vue引入 
import Zi from "./Zi.vue";
# 这里的向外暴露的方法名称要和文件名称一致
# export default function useZi(可以传递参数){ return {...}}
import useZi from "./model/useZi.vue";

const {...} = useZi()

ts 文件数据例子

<script setup lang="ts"> 
const { user } = toRefs(props)
const { repositories, getUserRepositories } = useUserRepositories(user)
</script>