1. shallowRef / shallowReactive —— 大数据救星

| 痛点 | 一次性渲染 5w 行表格，浏览器直接卡死 | 解药 | 只监听第一层，深层修改不再触发

import { shallowReactive } from 'vue'
const bigTable = shallowReactive({ rows: [] })
// 只有 rows 重新赋值才会刷新，rows[i].xxx 随意改

2. toRef / toRefs —— 告别 “props 一级级向下钻”

| 痛点 | 父组件对象传 3 层，后代组件一改动就失联 | 解药 | 直接把响应式属性“快递”到任何地方

// 父组件
const state = reactive({ name: 'Tom', age: 18 })
return { ...toRefs(state) }   // 子组件直接 v-model:age

3. watchPostEffect —— DOM 就绪后再动手

| 痛点 | 监听里操作 DOM，结果元素还没渲染出来 | 解药 | 等下一轮渲染完再执行

watchPostEffect(() => {
  // 此时 DOM 已更新，可安全获取 offsetHeight
})

4. v-for key —— 列表不闪跳

| 痛点 | 列表顺序一变，输入框错位、动画鬼畜 | 解药 | 用唯一且稳定的 key，不要用 index

<li v-for="u in userList" :key="u.id">{{ u.name }}</li>

5. 自定义 Hooks —— 逻辑复制粘贴终结者

| 痛点 | 每个页面都写一遍搜索+分页 | 解药 | 抽成 useSearchPage，一行搞定

export function useSearchPage(api) {
  const list = ref([])
  const loading = ref(false)
  const search = async (q) => { /* 通用逻辑 */ }
  return { list, loading, search }
}

6. v-cloak —— 防闪烁“隐形斗篷”

| 痛点 | 白屏+大括号闪现，用户以为页面坏了 | 解药 | 挂载前隐藏未编译模板

[v-cloak] { display: none; }

7. v-slot —— 组件内容“乐高化”

| 痛点 | 组件里写死结构，想扩展只能改源码 | 解药 | 用插槽把决定权交给父组件

<!-- 子组件 Card.vue -->
<slot name="header" :title="title"/>
<!-- 父组件 -->
<template #header="{ title }">
  <h2>{{ title }}</h2>
</template>

8. v-model 修饰符 —— 表单“小棉袄”

| 痛点 | 输入数字却要手动 parseInt.trim | 解药 | 官方 3 个修饰符一行到位

<input v-model.number="age" v-model.trim="name" />

9. keep-alive —— Tab 秒切无白屏

| 痛点 | 每次切 Tab 重新请求接口 | 解药 | 把组件缓存起来

<keep-alive include="UserProfile">
  <router-view />
</keep-alive>

10. Web Workers —— 主线程“分身术”

| 痛点 | 加密/排序大卡死 UI | 解药 | 放后台跑，主线程依旧丝滑

// worker.js
self.onmessage = ({ data }) => {
  const res = heavyTask(data)
  self.postMessage(res)
}

// 组件内
const worker = new Worker('/worker.js')
worker.postMessage(bigData)