cfy666
c1e9a4be83
- Update yarn.lock - Add project implementation docs in docs/ - Add personal internship experience notes in 实习讲解/
769 lines
29 KiB
Markdown
769 lines
29 KiB
Markdown
# Composition API Hooks 逻辑复用 — 面试版
|
||
|
||
> 简历原话：**"封装 Composition API Hooks 实现逻辑复用"**
|
||
>
|
||
> 这篇文档帮你理解项目里到底封装了哪些 Hooks、怎么复用的，以及面试时怎么讲。
|
||
|
||
---
|
||
|
||
## 一、先搞清楚：什么是 Hooks？为什么要封装？
|
||
|
||
### 问题场景
|
||
|
||
```
|
||
没有 Hooks 的时候：
|
||
页面A：需要响应式布局 → 写一堆 width 判断逻辑
|
||
页面B：也需要响应式布局 → 再写一遍 width 判断逻辑
|
||
页面C：也需要响应式布局 → 又写一遍...
|
||
|
||
页面D：需要获取仓库权限 → 调 API、存 ref、写 computed
|
||
页面E：也需要获取仓库权限 → 同样的代码再写一遍...
|
||
```
|
||
|
||
**痛点**：相同的逻辑散落在多个组件里，改了 A 忘改 B，代码臃肿、维护困难。
|
||
|
||
### 有了 Hooks 之后
|
||
|
||
```
|
||
封装一个 usePageResize() Hook：
|
||
页面A → const { widthType } = usePageResize()
|
||
页面B → const { widthType } = usePageResize()
|
||
页面C → const { widthType } = usePageResize()
|
||
26 个文件复用同一套逻辑，改 Hook 一处，全局生效
|
||
```
|
||
|
||
**一句话概括**：把可复用的响应式逻辑封装成独立的 `useXxx()` 函数，哪个组件需要就直接调用，避免重复代码。这是 Vue3 Composition API 最核心的设计思想。
|
||
|
||
### 项目中 Hooks 的定位
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────┐
|
||
│ Vue 组件层 │
|
||
│ Security/index.vue Ecosystem/index.vue AI/index.vue │
|
||
└────────┬───────────┬───────────┬──────────────────────┘
|
||
│ │ │ 调用 useXxx()
|
||
▼ ▼ ▼
|
||
┌────────────────────────────────────────────────────────┐
|
||
│ Hooks 逻辑层（30+ 个） │
|
||
│ usePageResize useRepoId usePagination useLogin ... │
|
||
└────────┬───────────┬───────────┬──────────────────────┘
|
||
│ │ │
|
||
▼ ▼ ▼
|
||
┌────────────────────────────────────────────────────────┐
|
||
│ Pinia Store / API / Router │
|
||
│ （底层数据源和基础能力） │
|
||
└────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 二、项目里有 30+ 个 Hooks，分六大类
|
||
|
||
| 分类 | Hooks | 数量 | 核心思想 |
|
||
|------|-------|------|----------|
|
||
| **通用交互** | usePageResize、useShowMore、useModel、usePagination、useLazyImport | 5+ | 跨组件复用的 UI 交互逻辑 |
|
||
| **表单与认证** | useFormInteraction、useLogin、useAccount、useAccModal、useNotice、useLoginCheck | 6+ | 登录/注册/表单校验的完整流程 |
|
||
| **数据获取** | useReq/useAsync、useRepoInit、useWikiHome/create/detail/history、useUserDashboard、useRepoList | 9+ | 异步请求 + 状态管理的一站式封装 |
|
||
| **路由/参数** | useRepoId、useOrgId、useBranchName、useTitle、useNav、useRepoPathValidate | 6+ | URL 参数解析、导航控制 |
|
||
| **权限控制** | useUserAccessLevel、usePagePermission、useIsPrivate | 3 | 权限判断 + computed 封装 |
|
||
| **其他辅助** | useFile、usePopup、useReport、useTimeFormat、useStarFollow、useUserInfo、useDiscussGetUserInfo 等 | 7+ | 文件图标、弹窗管理、埋点上报等 |
|
||
|
||
---
|
||
|
||
## 三、每个分类怎么实现的？（面试核心）
|
||
|
||
### 3.1 通用交互 Hooks（最常用）
|
||
|
||
#### usePageResize — 响应式断点判断（26 个文件复用）
|
||
|
||
```typescript
|
||
import { computed } from 'vue';
|
||
import { useWindowSize } from '@vueuse/core';
|
||
|
||
const { width } = useWindowSize();
|
||
|
||
export const usePageResize = () => {
|
||
const widthConfig = { xxl: 1536, xl: 1280, md: 1024, lg: 768 };
|
||
|
||
const widthType = computed(() => {
|
||
if (width.value > 1536) return 'xxl';
|
||
if (width.value > 1280) return 'xl';
|
||
if (width.value > 1024) return 'md';
|
||
if (width.value > 768) return 'lg';
|
||
return 'sm';
|
||
});
|
||
|
||
const isMobile = computed(() => width.value <= 1024);
|
||
|
||
return { widthType, width, isMobile };
|
||
};
|
||
```
|
||
|
||
**怎么用**：
|
||
```vue
|
||
<script setup>
|
||
const { widthType, isMobile } = usePageResize();
|
||
// 根据不同断点渲染不同布局
|
||
</script>
|
||
```
|
||
|
||
**复用在**：15 个布局文件 + 4 个态势感知图表组件 + 导航栏、底部栏等，共 26 个文件。
|
||
|
||
**面试话术**：
|
||
> "封装了 usePageResize，基于 vueuse 的 useWindowSize 响应式监听窗口宽度，定义了 5 个断点（xxl/xl/md/lg/sm），返回 computed 类型的 widthType 和 isMobile。26 个布局和组件文件都在用，页面布局根据断点自动切换，不需要每个文件自己写一遍判断。"
|
||
|
||
---
|
||
|
||
#### useModel — v-model 双向绑定封装（18 个文件复用）
|
||
|
||
```typescript
|
||
// 把 v-model 的 prop + emit 封装成统一的写法
|
||
export function useModel(props, emits) {
|
||
const vModels = computed({
|
||
get() { return props.modelValue; },
|
||
set(val) { emits('update:modelValue', val); }
|
||
});
|
||
return { vModels };
|
||
}
|
||
```
|
||
|
||
**解决什么**：Vue3 自定义组件里使用 v-model 需要写 `props.modelValue` + `emits('update:modelValue')`，每个弹窗/输入组件都写一遍很繁琐。这个 Hook 一行代码搞定。
|
||
|
||
**怎么用**：
|
||
```vue
|
||
<script setup>
|
||
const props = defineProps({ modelValue: Boolean });
|
||
const emits = defineEmits(['update:modelValue']);
|
||
const { vModels } = useModel(props, emits);
|
||
// vModels.value 就是双向绑定的值
|
||
</script>
|
||
```
|
||
|
||
**复用在**：18 个弹窗/表单组件（登录弹窗、标签选择、分支选择等）。
|
||
|
||
---
|
||
|
||
#### usePagination — 分页器封装
|
||
|
||
```typescript
|
||
export const usePagination = ({ storageKey, clientType }) => {
|
||
const pager = reactive({
|
||
page: 1, pageSize: 10, total: 0,
|
||
loading: false, isFirstLoad: true,
|
||
showLoading: false, showEmpty: false,
|
||
});
|
||
|
||
// 自动判断显示骨架屏还是 loading
|
||
watch(() => pager.loading, (value) => {
|
||
if (value) {
|
||
if (pager.isFirstLoad || pager.total === 0) {
|
||
pager.showLoading = false; // 首次加载用骨架屏
|
||
} else {
|
||
pager.showLoading = true; // 切换页用 loading
|
||
}
|
||
} else {
|
||
pager.showEmpty = pager.total === 0;
|
||
}
|
||
});
|
||
|
||
return { pager, pageOptions };
|
||
};
|
||
```
|
||
|
||
**亮点**：自动区分"首次加载"和"翻页加载"，首次加载显示骨架屏（结构预览），翻页显示 loading 动画，体验更好。
|
||
|
||
---
|
||
|
||
#### useShowMore — 内容溢出检测
|
||
|
||
```typescript
|
||
export const useShowMore = (eleRef) => {
|
||
const isOver = ref(false); // 内容是否超出容器
|
||
|
||
const checkRange = () => {
|
||
isOver.value = eleRef.value.scrollHeight > eleRef.value.clientHeight;
|
||
};
|
||
|
||
useResizeObserver(eleRef, checkRange); // 利用 ResizeObserver 自动检测
|
||
|
||
return { isOver, showMore, onShowMore };
|
||
};
|
||
```
|
||
|
||
**解决什么**：很多卡片展示简介时只能显示 3 行，超出部分要显示"查看更多"。这个 Hook 自动检测内容是否溢出。
|
||
|
||
---
|
||
|
||
#### useLazyImport — 异步组件懒加载封装
|
||
|
||
```typescript
|
||
export function useLazyImport(loader, options = {}) {
|
||
return defineAsyncComponent({
|
||
loader,
|
||
loadingComponent: showLoading ? LoadingComponents : '',
|
||
timeout: 2000, // 2s 超时
|
||
delay: 100, // 100ms 后才显示 loading（避免闪烁）
|
||
onError: (_, retry, fail) => {
|
||
Message.error('加载失败');
|
||
fail();
|
||
}
|
||
});
|
||
}
|
||
```
|
||
|
||
**解决什么**：大组件异步加载时，统一处理 loading 状态、超时、错误重试。项目中有至少 6 个组件通过它注册为异步组件。
|
||
|
||
---
|
||
|
||
### 3.2 表单与认证 Hooks
|
||
|
||
#### useFormInteraction — 表单校验完整流程（最复杂，332 行）
|
||
|
||
这是项目中最大的 Hook，封装了整个表单交互逻辑：
|
||
|
||
```typescript
|
||
export function useFormInteraction(currentForm, flag, extraStatus) {
|
||
// 状态管理
|
||
const formErrors = reactive({}); // 表单校验错误
|
||
const disabled = ref(true); // 提交按钮禁用
|
||
const loading = ref(false); // 提交 loading
|
||
const FormRef = shallowRef(null); // 表单组件引用
|
||
const status = ref(flag); // 协议勾选状态
|
||
|
||
// 表单字段 change：实时校验单个字段
|
||
const handleFormChange = ({ key, errors }) => { ... };
|
||
|
||
// 表单 input：判断是否禁用提交
|
||
const handleFormInput = (val) => { disabled.value = val; };
|
||
|
||
// 表单 submit：校验全部 → 通过则回调
|
||
const handleSubmit = async (callback) => {
|
||
const formData = await FormRef.value.ValidateForm();
|
||
if (formData.type === 'success') {
|
||
await callback(formData.forms); // 执行提交逻辑
|
||
} else {
|
||
catchFormErrors(formData); // 展示错误
|
||
}
|
||
};
|
||
|
||
// 倒计时：发送验证码后 59 秒倒计时
|
||
const handleCountDown = async (conf, callback) => { ... };
|
||
|
||
// 第三方登录：OAuth 跳转
|
||
const handleAuthLogin = (type) => { ... };
|
||
|
||
return {
|
||
FormRef, formErrors, disabled, loading,
|
||
handleFormChange, handleFormInput, handleSubmit,
|
||
handleCountDown, handleAuthLogin, ...
|
||
};
|
||
}
|
||
```
|
||
|
||
**封装了什么**：表单校验、清错、提交、协议勾选、倒计时、第三方 OAuth 登录——所有登录/注册页的通用逻辑，全部封装在一个 Hook 里。
|
||
|
||
**怎么用**：
|
||
```vue
|
||
<script setup>
|
||
const { FormRef, disabled, loading, handleSubmit, handleFormChange } =
|
||
useFormInteraction(formList);
|
||
</script>
|
||
<template>
|
||
<Form ref="FormRef" @change="handleFormChange">
|
||
<!-- 表单内容 -->
|
||
</Form>
|
||
<Button :disabled="disabled" :loading="loading" @click="handleSubmit(onLogin)">
|
||
登录
|
||
</Button>
|
||
</template>
|
||
```
|
||
|
||
---
|
||
|
||
#### useLogin / useAccModal / useNotice — 弹窗类 Hooks
|
||
|
||
这三个 Hook 都基于 `usePopup` 封装，负责不同类型的弹窗：
|
||
|
||
```typescript
|
||
// useLogin — 登录弹窗
|
||
export function useLogin() {
|
||
const { mount, unMount, isMounted } = usePopup();
|
||
const login = (options) => {
|
||
if (isMounted()) return; // 防止重复弹出
|
||
mount(LoginModal, {
|
||
onLogin: (userInfo) => { unMount(); RecordInfo(userInfo); },
|
||
onClose: () => { unMount(); }
|
||
});
|
||
};
|
||
return { login };
|
||
}
|
||
|
||
// useAccModal — 快捷登录弹窗（支持 CSDN/Gitee/GitHub）
|
||
export function useAccModal() {
|
||
const { mount, unMount } = usePopup('g-acc-modal');
|
||
const openModal = () => {
|
||
if (isMounted()) return;
|
||
mount(AccModal, { onConfirm: (type) => { /* OAuth 跳转 */ } });
|
||
};
|
||
return { openModal };
|
||
}
|
||
|
||
// useNotice — 邮箱修改提醒弹窗
|
||
export function useNotification() {
|
||
const { mount, unMount } = usePopup('global-notification', document.body);
|
||
const notice = () => {
|
||
mount(NoticeModal, { onConfirm: () => { router.push('/setting/email'); } });
|
||
};
|
||
return { notice };
|
||
}
|
||
```
|
||
|
||
**设计模式**：三个弹窗 Hook 基于同一个 `usePopup` 底层能力，各自封装不同的弹窗组件和业务逻辑。调用方只需要一行：
|
||
```typescript
|
||
const { login } = useLogin();
|
||
login({ type: 'login' }); // 弹出登录窗口
|
||
```
|
||
|
||
---
|
||
|
||
#### useAccount — 用户信息增删改查
|
||
|
||
```typescript
|
||
export function useAccount() {
|
||
const userInfo = useAccountStore();
|
||
const { accountInfo } = storeToRefs(userInfo);
|
||
|
||
// 记录用户信息（登录时）
|
||
const RecordInfo = (source) => {
|
||
localStorage.setItem('op_access_token', source.op_access_token);
|
||
localStorage.setItem('opUserInfo', JSON.stringify(userInfo));
|
||
saveStatus(true);
|
||
saveAccountInfo(userInfo);
|
||
};
|
||
|
||
// 清除用户信息（退出时）
|
||
const RemoveInfo = () => {
|
||
localStorage.removeItem('op_access_token');
|
||
// ... 清除 10+ 个 localStorage key
|
||
saveStatus(false);
|
||
saveAccountInfo();
|
||
};
|
||
|
||
return { RecordInfo, RemoveInfo, accountInfo };
|
||
}
|
||
```
|
||
|
||
**封装的逻辑**：Token 存 localStorage + Store 同步 + 登录状态更新。一次调用 RecordInfo 完成三件事，13 个文件复用。
|
||
|
||
---
|
||
|
||
### 3.3 数据获取 Hooks
|
||
|
||
#### useReq/useAsync — 异步请求封装（通用能力）
|
||
|
||
```typescript
|
||
export const useAsync = (fn, params, precondition, map) => {
|
||
const data = ref(null);
|
||
const error = ref(null);
|
||
const loading = ref(false);
|
||
|
||
watchEffect(() => {
|
||
if (!precondition()) return; // 前提条件不满足，不发请求
|
||
loading.value = true;
|
||
fn(params).then(res => data.value = map(res))
|
||
.catch(e => error.value = e)
|
||
.finally(() => loading.value = false);
|
||
});
|
||
|
||
return { data, error, loading, mutate }; // mutate 手动触发重新请求
|
||
};
|
||
```
|
||
|
||
**解决什么**：每个页面都要写 `data/loading/error` 三件套 + try/catch。这个 Hook 一行调用搞定，自动处理 loading 状态和错误捕获。
|
||
|
||
**面试话术**：
|
||
> "封装了 useAsync 和 useReq 两个通用请求 Hook。useAsync 接收请求函数、参数、前置条件和结果映射函数，自动管理 data/loading/error 三种状态。前置条件不满足时不会发请求（比如用户未登录时不发），通过 watchEffect 自动追踪依赖变化。还提供了 mutate 方法手动触发重新请求。"
|
||
|
||
---
|
||
|
||
#### useRepoInit — 仓库首页全部数据一站式初始化（243 行）
|
||
|
||
```typescript
|
||
export const useRepoInit = () => {
|
||
const { repoId } = useRepoId();
|
||
const repoInfo = reactive({...}); // 仓库信息
|
||
const loadingStatus = reactive({ // 5 个模块的加载状态
|
||
profileLoading: true,
|
||
readmeLoading: true,
|
||
eventsLoading: true,
|
||
contributorLoading: true,
|
||
releasesLoading: true,
|
||
});
|
||
|
||
const initRepoHeader = async () => { // 顶部初始化（快）
|
||
initRepoData(); await initNotice();
|
||
};
|
||
|
||
const initRepoDashboard = () => { // 首页初始化（完整）
|
||
initRepoData(); initEvents(); initReadme();
|
||
initContributors(); initRelease();
|
||
};
|
||
|
||
return {
|
||
repoInfo, loadingStatus, readmeText, timeData,
|
||
contributorList, releasesList,
|
||
initRepoHeader, initRepoDashboard, ...
|
||
};
|
||
};
|
||
```
|
||
|
||
**为什么这样设计**：仓库首页需要加载仓库信息、README、动态、贡献者、Release 等 5+ 个模块的数据。每个模块都有独立的 loading 状态。Hook 封装了它们的初始化时机（header 先加载，dashboard 完整加载），页面只管调用 `initRepoHeader()` 和 `initRepoDashboard()`。
|
||
|
||
---
|
||
|
||
#### useWikiHome / useWikiCreate / useWikiDetail / useWikiHistory — Wiki 全流程 Hooks
|
||
|
||
四个 Hook 覆盖 Wiki 的完整生命周期（首页 → 创建 → 详情 → 历史版本），每个 Hook 封装对应的数据获取 + 状态管理：
|
||
|
||
```
|
||
useWikiHome() → 首页：获取 Wiki 列表 + Home.md 内容
|
||
useWikiCreate() → 创建/编辑页：表单数据 + 提交 + 删除
|
||
useWikiDetail() → 详情页：内容 + 侧边栏 + 页脚
|
||
useWikiHistory() → 历史版本：版本列表 + 分页
|
||
```
|
||
|
||
**设计思想**：每个页面一个 Hook，页面组件只负责渲染，数据逻辑全部在 Hook 里。
|
||
|
||
---
|
||
|
||
#### useUserDashboard — 用户首页一站式数据初始化（272 行）
|
||
|
||
```typescript
|
||
export const useUserDashboard = () => {
|
||
// 6 个模块的数据
|
||
const userRepoList = ref([]); // 我的仓库
|
||
const userEventsList = ref({}); // 最近动态
|
||
const recommandRepoList = ref([]); // 推荐仓库
|
||
const recommandOrgList = ref([]); // 推荐组织
|
||
const userActivityList = ref([]); // 关注动态
|
||
const operationData = ref({}); // 运营信息
|
||
|
||
// 6 个模块的加载状态
|
||
const loadingStatus = reactive({
|
||
boardLoading: true, myRepoLoading: true,
|
||
eventLoading: true, repoRecmLoading: true,
|
||
orgRecmLoading: true, activityLoading: true,
|
||
});
|
||
|
||
const pageInit = async () => { // 一键初始化
|
||
loadingStatus.boardLoading = true;
|
||
await getUserInfo();
|
||
await getUserRepos();
|
||
loadingStatus.boardLoading = false;
|
||
getRecentEvents(); // 不阻塞首屏
|
||
getOperationData(); // 不阻塞首屏
|
||
recommandRepos();
|
||
recommandOrgs();
|
||
getUserActivity();
|
||
};
|
||
|
||
return { userInfo, userRepoList, loadingStatus, pageInit, ... };
|
||
};
|
||
```
|
||
|
||
**面试话术**：
|
||
> "比如 useUserDashboard 这个 Hook，封装了用户首页 6 个模块的数据获取——仓库列表、最近动态、推荐仓库、推荐组织、关注动态、运营信息，每个模块有独立的 loading 状态。pageInit 方法分层加载：先加载用户信息和仓库列表（阻塞首屏），然后并行加载其他 5 个模块（不阻塞首屏）。页面上只需要 `const { pageInit } = useUserDashboard(); onMounted(pageInit);` 两行代码。"
|
||
|
||
---
|
||
|
||
#### useRepoList — 用户仓库列表（含 Star 操作）
|
||
|
||
```typescript
|
||
export const useRepoList = (params) => {
|
||
const repoList = ref([]);
|
||
const allRepoList = ref([]);
|
||
const createdRepoList = ref([]);
|
||
const starredRepoList = ref([]);
|
||
const loading = ref(false);
|
||
|
||
// 四类仓库列表 + Star/Unstar 操作
|
||
const toggleRepoStar = ({ id, isStar }) => {
|
||
if (!userInfo.username) {
|
||
emitEvent('login', { triggerType: 'Star' }); // 未登录 → 弹出登录框
|
||
return;
|
||
}
|
||
isStar ? unstarRepo({ repoId: id }) : starRepo({ repoId: id });
|
||
init(); // 操作后重新拉取列表
|
||
};
|
||
|
||
return { allRepoList, createdRepoList, starredRepoList, toggleRepoStar, init };
|
||
};
|
||
```
|
||
|
||
**封装的逻辑**：四种仓库列表 + Star/Unstar 操作 + 未登录时自动弹出登录框。8 个文件复用。
|
||
|
||
---
|
||
|
||
### 3.4 路由/参数 Hooks
|
||
|
||
#### useRepoId — 从 URL 提取仓库 ID（30 个文件复用，使用最多）
|
||
|
||
```typescript
|
||
export const useRepoId = (connector = '%2F', namespace = '') => {
|
||
const route = useRoute();
|
||
const repoId = computed(() => {
|
||
const [, ns, repo, ...rest] = route.path.split('/');
|
||
if (namespace) {
|
||
return [ns, repo, ...rest].join(connector); // 拼接完整路径
|
||
}
|
||
return [ns, repo].join(connector); // namespace/repo
|
||
});
|
||
return { repoId };
|
||
};
|
||
```
|
||
|
||
**解决什么**：项目中大量页面需要从 URL 中提取仓库的 namespace/repoName（如 `gitcode/MyProject`）。30 个文件都在用这个 Hook，不需要每个文件自己解析 URL。
|
||
|
||
**类似的还有**：`useOrgId`（提取组织 ID）、`useBranchName`（提取分支名+编码）。
|
||
|
||
---
|
||
|
||
#### useTitle — 页面标题设置
|
||
|
||
```typescript
|
||
export const usePageTitle = (title, name) => {
|
||
if (title && name) {
|
||
pageTitle.value = `${title}`;
|
||
} else {
|
||
pageTitle.value = title || (name ? `${name} - GitCode` : 'Tcode');
|
||
}
|
||
};
|
||
```
|
||
|
||
路由守卫中每个页面切换时调用，自动更新浏览器标签页标题。
|
||
|
||
---
|
||
|
||
### 3.5 权限控制 Hooks
|
||
|
||
#### useUserAccessLevel — 权限查询 + 角色判断
|
||
|
||
```typescript
|
||
export function useUserAccessLevel({ type = 'org', targetId = '' } = {}) {
|
||
const access_level = ref(0);
|
||
|
||
async function getPermission(id) {
|
||
if (type === 'org') {
|
||
const res = await getOrgPermission({ group_id: id });
|
||
access_level.value = res.data.data.my_role?.access_level || 0;
|
||
} else {
|
||
const res = await getRepoPermission({ repo_id: id });
|
||
access_level.value = res.data.data.access_level || 0;
|
||
}
|
||
}
|
||
|
||
// 三种角色自动 computed
|
||
const isAdmin = computed(() => access_level.value >= admin); // 50
|
||
const isDeveloper = computed(() => access_level.value >= developer); // 30
|
||
const isVisitor = computed(() => access_level.value >= visitor); // 10
|
||
|
||
return { access_level, getPermission, isAdmin, isDeveloper, isVisitor };
|
||
}
|
||
```
|
||
|
||
**解决什么**：查询用户在当前组织/仓库的权限后，自动算出三个布尔角色值。配合 Store 里的权限 computed，页面只需 `if (isAdmin)` 判断是否显示管理按钮。
|
||
|
||
#### usePagePermission — 页面级权限控制
|
||
|
||
```typescript
|
||
export function usePagePermission(access_level, isPrivate) {
|
||
// 根据权限等级和是否私有，返回哪些菜单/操作可用
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 3.6 其他辅助 Hooks
|
||
|
||
#### useFile — 文件类型识别（图标 + 语言高亮）
|
||
|
||
```typescript
|
||
export function useFile() {
|
||
// 根据文件名后缀返回对应图标名
|
||
const getFileIcon = (filename) => {
|
||
const format = filename?.split('.').pop();
|
||
if (/^(zip|rar|7z)$/i.test(format)) return 'gt-file-zip-c';
|
||
if (/^(png|jpg|jpeg|gif)$/i.test(format)) return 'gt-picture-c';
|
||
if (/^(js|ts|vue|py)$/i.test(format)) return 'gt-file-code-c';
|
||
return 'gt-file-c';
|
||
};
|
||
|
||
// 根据文件名返回代码高亮语言
|
||
const getFileLanguage = (filename) => {
|
||
const map = { js: 'javascript', ts: 'typescript', vue: 'html', py: 'python' };
|
||
return map[format] || format;
|
||
};
|
||
|
||
return { getIcon, getFileLanguage, getFileFormat };
|
||
}
|
||
```
|
||
|
||
#### useStarFollow — 关注/粉丝操作
|
||
|
||
```typescript
|
||
export const useStarFollow = (params, auto) => {
|
||
const toggleStar = (username, followedUsername, follow) => {
|
||
if (!username) {
|
||
emitEvent('login', { triggerType: '关注用户' }); // 未登录→弹出登录
|
||
return;
|
||
}
|
||
follow ? followUser(...) : unfollowUser(...);
|
||
microApp.setData('user-center', { type: 'user_hasFollowed_update', ... });
|
||
};
|
||
return { fanCount, followCount, hasFollowed, toggleStar };
|
||
};
|
||
```
|
||
|
||
**封装了什么**：关注/取消关注的 API 调用 + 状态更新 + 微前端数据同步 + 未登录自动弹登录框。
|
||
|
||
---
|
||
|
||
#### useReport — 埋点上报
|
||
|
||
```typescript
|
||
export const useReport = (eventID, eventParams, headers) => {
|
||
// 统一埋点上报逻辑
|
||
};
|
||
```
|
||
|
||
#### usePopup — 弹窗管理器（底层能力）
|
||
|
||
被 useLogin、useAccModal、useNotice 三个 Hook 依赖的底层弹窗管理：
|
||
|
||
```typescript
|
||
export function usePopup(className?, rootElement?) {
|
||
const mount = (component, props) => { /* 挂载弹窗到 DOM */ };
|
||
const unMount = () => { /* 卸载弹窗 */ };
|
||
const isMounted = () => { /* 是否已挂载 */ };
|
||
return { mount, unMount, isMounted };
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 四、Hooks 之间的层次关系
|
||
|
||
```
|
||
底层能力（被其他 Hook 依赖）
|
||
├── usePopup → 弹窗挂载/卸载
|
||
├── useReq/useAsync → 通用异步请求封装
|
||
├── useRepoId → URL 参数解析
|
||
└── useModel → v-model 封装
|
||
|
||
中间能力（组合底层能力）
|
||
├── useLogin → 基于 usePopup
|
||
├── useAccModal → 基于 usePopup
|
||
├── useNotice → 基于 usePopup
|
||
├── useFormInteraction → 基于 useAccount + useRouter
|
||
├── useUserAccessLevel → 基于 useUserInfo
|
||
|
||
业务能力（组合中间能力）
|
||
├── useRepoInit → 基于 useRepoId
|
||
├── useWikiHome → 基于 useRepoId + useRouter
|
||
├── useRepoList → 基于 API 调用
|
||
├── useUserDashboard → 基于 6 个 API 调用
|
||
├── useStarFollow → 基于 API + eventBus + microApp
|
||
└── usePageResize → 基于 useWindowSize（vueuse）
|
||
```
|
||
|
||
**面试话术**：
|
||
> "我设计的 Hooks 是有层次的。底层 Hooks 提供通用能力（如 usePopup 管理弹窗生命周期、useAsync 封装异步请求）；中间层 Hooks 基于底层组合出业务场景（如 useLogin 基于 usePopup 封装登录弹窗流程）；最上层是业务 Hooks，组件里一行代码调用就能获得完整的数据和操作方法。"
|
||
|
||
---
|
||
|
||
## 五、整体架构总结
|
||
|
||
```
|
||
30+ 个 Hooks 在项目中的定位：
|
||
|
||
可复用逻辑提取为 Hooks
|
||
↓
|
||
┌───────────────┐
|
||
│ 通用交互 (5+) │ usePageResize(26文件) useModel(18文件) usePagination useShowMore useLazyImport
|
||
├───────────────┤
|
||
│ 表单认证 (6+) │ useFormInteraction(8文件) useLogin useAccount(13文件) useAccModal useNotice
|
||
├───────────────┤
|
||
│ 数据获取 (9+) │ useAsync/useReq useRepoInit(7文件) useWikiHome/create/detail/history
|
||
│ │ useUserDashboard useRepoList(8文件) useDiscussGetUserInfo
|
||
├───────────────┤
|
||
│ 路由参数 (6+) │ useRepoId(30文件) useOrgId useBranchName useTitle useNav useRepoPathValidate
|
||
├───────────────┤
|
||
│ 权限控制 (3) │ useUserAccessLevel usePagePermission useIsPrivate
|
||
├───────────────┤
|
||
│ 其他辅助 (7+) │ useFile usePopup useReport useTimeFormat useStarFollow(4文件) useUserInfo
|
||
└───────────────┘
|
||
↓
|
||
Vue 组件层（40+ 组件调用）
|
||
```
|
||
|
||
---
|
||
|
||
## 六、面试问答准备
|
||
|
||
### Q1："封装 Composition API Hooks 实现逻辑复用"具体做了什么？
|
||
|
||
> 项目里封装了 30 多个 Hooks，分为六大类。最核心的几个：usePageResize 把响应式断点判断封装成 Hook，26 个布局文件复用；useRepoId 从 URL 提取仓库 ID，30 个文件复用；useFormInteraction 封装了完整的表单校验流程（332 行），8 个登录/注册页共享同一套校验逻辑；useUserDashboard 封装了用户首页 6 个模块的数据初始化，页面只需两行代码完成全部数据加载。Hooks 之间还有层次关系——底层 Hooks（usePopup、useAsync）提供通用能力，中间层组合底层能力，业务层直接给组件用。
|
||
|
||
### Q2：Hooks 和之前写的工具函数有什么区别？
|
||
|
||
> 工具函数是无状态的（纯函数，输入→输出），Hooks 是有状态的（包含 ref、computed、watch）。比如 useFormInteraction 内部管理了 formErrors、disabled、loading 等 6 个状态，还监听了表单 change 事件自动校验。如果写成工具函数，这些状态管理就要在每个页面里重复写。Hooks 把"响应式状态 + 操作逻辑"封装在一起，是 Vue3 Composition API 的核心优势。
|
||
|
||
### Q3：Hooks 怎么保证类型安全？
|
||
|
||
> 所有 Hooks 都用 TypeScript 写，返回值和参数都有类型定义。比如 usePagination 接收 `{storageKey, clientType}` 接口类型，useRepoList 接收包含 profile/all/created/starred 四种子参数的类型。组件调用时 VSCode 有完整的智能提示。
|
||
|
||
### Q4：有没有用过 VueUse 的 Hooks？
|
||
|
||
> 用过，useWindowSize、useResizeObserver、useTitle 等都是从 @vueuse/core 引入的。但项目不只是用第三方 Hooks，更关键的是基于 VueUse 做二次封装——比如 usePageResize 基于 useWindowSize 封装了断点判断逻辑，useShowMore 基于 useResizeObserver 封装了内容溢出检测。既用了社区的最佳实践，又做了业务定制。
|
||
|
||
### Q5：30 多个 Hooks 怎么组织的？会不会管理混乱？
|
||
|
||
> 按职责分目录：通用的放在 `src/utils/hooks/`（30 个），特定业务域放在对应的 views 目录下（如 `src/views/User/hooks/` 放用户相关的 7 个 Hook），布局相关的放在 `src/layouts/hooks/`。调用时能直观看出 Hook 的作用域。
|
||
|
||
### Q6：Hooks 和 Pinia Store 怎么分工？
|
||
|
||
> Hooks 和 Store 的分工很明确。Store 存跨组件共享的持久状态（用户信息、仓库信息），Hooks 封装的是"行为逻辑"——怎么获取数据、怎么校验表单、怎么处理交互。Hooks 经常调用 Store 来读写状态，但它们不替代 Store。比如 useAccount Hook 既调用 Store 的 saveAccountInfo，又操作 localStorage，把"用户信息存储到 Store + 持久化到 localStorage + 更新登录状态"三步封装成一步 RecordInfo。
|
||
|
||
---
|
||
|
||
## 七、关键数字（面试时用）
|
||
|
||
| 数据 | 数字 |
|
||
|------|------|
|
||
| Hooks 总数 | 30+ 个 |
|
||
| 使用最多的 Hook | useRepoId（30 个文件、61 处引用） |
|
||
| 第二常用 | usePageResize（26 个文件、51 处引用） |
|
||
| 第三常用 | useModel（18 个文件、35 处引用） |
|
||
| 最大的 Hook | useFormInteraction（332 行） |
|
||
| 业务最全的 Hook | useUserDashboard（6 个模块数据初始化） |
|
||
| 弹窗类 Hooks | 3 个（useLogin/useAccModal/useNotice，共用 usePopup） |
|
||
| Wiki 全家桶 | 4 个（Home/Create/Detail/History） |
|
||
| 权限类 Hooks | 2 个（useUserAccessLevel/usePagePermission） |
|
||
| 基于 @vueuse/core 封装的 | 3 个（useWindowSize/useResizeObserver/useTitle） |
|
||
|
||
---
|
||
|
||
## 八、涉及的源码文件（需要看的时候查）
|
||
|
||
| 做什么 | 文件在哪 |
|
||
|--------|----------|
|
||
| 通用交互 Hooks（5 个） | `src/utils/hooks/usePageResize.ts`、`useShowMore.ts`、`useModel.ts`、`usePagination.ts`、`useLazy.ts` |
|
||
| 表单与认证 Hooks（6 个） | `src/utils/hooks/useForm.ts`、`useLogin.ts`、`useAccount.ts`、`useAccModal.ts`、`useNotice.ts`、`useLoginCheck.ts` |
|
||
| 数据获取 Hooks（9 个） | `src/utils/hooks/useReq.ts`、`useRepoInit.ts`、`useWikiInit.ts`、`useIssueTemplate.ts`、`src/api/discussion/hook.ts` |
|
||
| 用户域 Hooks（7 个） | `src/views/User/hooks/useUserDashboard.ts`、`useRepoList.ts`、`useStarFollow.ts`、`useContributes.ts`、`useTimelineActivities.ts`、`useIsPrivate.ts`、`useUserLang.ts` |
|
||
| 路由/参数 Hooks（6 个） | `src/utils/hooks/useRepoId.ts`、`useOrgId.ts`、`usebranchName.ts`、`useTitle.ts`、`useNav.ts`、`useRepoPathValidate.ts` |
|
||
| 权限控制 Hooks（3 个） | `src/utils/hooks/useUserAccessLevel.ts`、`src/layouts/hooks/usePagePermission.ts`、`src/views/User/hooks/useIsPrivate.ts` |
|
||
| 其他辅助 Hooks（7 个） | `src/utils/hooks/useFile.ts`、`usePopup.ts`、`useReport.ts`、`useTimeFormat.ts`、`useUserInfo.ts`、`useRepoHeaderInit.ts`、`useBranchOptions.ts` |
|
||
| 组织域 Hooks | `src/views/Org/hooks/orgInfo.ts` |
|
||
| 弹窗底层能力 | `src/utils/hooks/usePopup.ts`（被 useLogin/useAccModal/useNotice 依赖） |
|