Vue组合式API实战

1

初识组合式API 为什么要有组合式API？setup函数基本用法

2

ref与reactive 响应式核心 · 基本类型vs对象

3

computed计算属性 只读/可写 · 从Options到组合式

4

watch与watchEffect 懒执行 · 自动追踪 · 停止监听

5

生命周期钩子 onMounted/onUnmounted · 对比Options

6

模板引用与ref 获取DOM/子组件 · 组合式API

7

provide与inject 跨层级通信 · 响应式传递

8

自定义Hooks useXxx规范 · 封装useCounter

9

组合式API与TypeScript 类型推断 · 泛型 · ref/reactive类型

10

组合式API与Vue Router useRouter/useRoute · 路由守卫

11

组合式API与Pinia useStore · actions/getters

12

组合式API与异步请求 async/await · useFetch · 加载/错误

13

组合式API与表单处理 响应式表单 · useForm Hook

14

组合式API与事件总线 mitt/tiny-emitter · 跨组件通信

15

组合式API与动画 requestAnimationFrame · useAnimation

16

组合式API与WebSocket 实时通信 · useWebSocket · 自动重连

17

组合式API与LocalStorage 数据持久化 · useStorage · 响应式

18

组合式API与防抖节流 性能优化 · useDebounce/useThrottle

19

组合式API与DOM事件 useEventListener · 自动清理

20

组合式API与IntersectionObserver 懒加载/无限滚动 · useIntersectionObserver

21

组合式API与MediaQuery 响应式设计 · useMediaQuery

22

组合式API与Clipboard 剪贴板操作 · useClipboard

23

组合式API与在线状态 网络检测 · useOnline · 离线提醒

24

组合式API与页面可见性 usePageVisibility · 暂停动画

25

组合式API与定时器 useInterval/useTimeout · 自动清理

26

组合式API与键盘事件 useKeyPress · 组合键支持

27

组合式API与鼠标位置 useMousePosition · 性能优化

28

组合式API与窗口大小 useWindowSize · 响应式布局

29

组合式API与滚动位置 useScrollPosition · 回到顶部

30

综合实战：Todo应用 Options→组合式 · 状态/路由/异步/Hooks