组合式函数是vue性能优化的核心手段：usedefer分帧渲染防卡顿，shallowref/shallowreactive精简响应式追踪，虚拟滚动hook统一管理可视范围，v-memo+memoizedcomputed减少重复计算与渲染。
Vue.js 渲染逻辑中，组合式函数不是“锦上添花”的工具，而是控制更新节奏、拆分计算负担、规避响应式开销的直接手段。关键不在于写多少函数，而在于让每个函数承担明确且可复用的性能职责。
用 useDefer 分批渲染大量元素
一次性挂载上万条数据会阻塞主线程，造成白屏或卡顿。useDefer 利用 requestAnimationFrame 把渲染任务切片，每帧只处理固定数量项，保持 60fps 流畅度。
- 定义时指定每批渲染数量（如 50 条），内部用 frameCount 记录已执行帧数
- 模板中配合 v-for 使用 defer(n)，仅当 frameCount ≥ n 时才渲染第 n 条：
<div v-for="(item, i) in items" :key="i" v-show="defer(i + 1)">{{ item.name }}</div> - 组件卸载时自动 cancelAnimationFrame，避免内存泄漏
用 shallowRef/shallowReactive 精简响应式追踪
深层嵌套对象（如 API 返回的完整用户列表）若全量响应式，每次任意字段变更都会触发整个列表的依赖通知。对只读或仅顶层变动的数据，应主动降级响应式深度。
- 配置类、主题设置、静态表格列定义等，用 shallowRef 包裹，避免 proxy 递归监听
- 大型数组或对象作为 props 接收时，用 shallowReactive，子属性修改需手动 triggerRef 或调用 update 函数
- 与 computed 配合：computed 依赖 shallowRef 时，仅在其 .value 被重新赋值时才更新，而非内部属性变化
用自定义 hook 封装虚拟滚动逻辑
虚拟滚动不是加个第三方组件就完事——它需要与业务状态协同。把滚动位置、可视范围计算、缓冲区管理封装成组合式函数，能统一控制更新粒度和缓存策略。
- hook 内部维护 start/end 索引、scrollTop、clientHeight 等状态，对外暴露 visibleItems 和 scrollToIndex 方法
- 使用 IntersectionObserver 或 scroll 事件节流监听，避免高频触发
- 结合 v-memo：在列表项模板中用
v-memo="[item.id, item.status]"，确保仅当关键字段变化时才重渲染该节点
用 memoizedComputed 缓存高开销计算结果
模板中频繁调用复杂函数（如格式化时间、树形结构扁平化）会重复执行，尤其在列表项中放大问题。组合式函数可封装带记忆能力的计算逻辑。
- 基于 LRU 或参数哈希实现简易缓存，例如
const formatTree = memoize((data) => { /* 递归处理 */ }) - 在 setup 中调用并返回 ref，供模板直接使用，避免每次渲染都重建闭包
- 搭配 watch 清除缓存：当原始数据源更新时，自动失效对应 key 的缓存项
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
