优化Vue 3高频更新需控制节奏、缩小范围、延迟合并：用useDebounce/useThrottle处理输入/滚动；shallowRef/shallowReactive避免深层代理；triggerRef+markRaw减少无效追踪；批量变更+computed提升渲染效率。
高频触发的数据更新（比如实时搜索输入、滚动监听、传感器数据流）容易让 Vue 3 的响应式系统过载——每次 set 都会触发依赖收集、副作用执行和 DOM 重渲染。优化关键不是“禁用响应式”，而是**控制更新节奏、缩小响应范围、延迟或合并变更**。
用 useDebounce / useThrottle 控制触发频率
对用户输入、滚动、resize 等高频事件，直接绑定 ref 或 reactive 会导致每毫秒都走一遍响应式链路，毫无必要。
- 防抖（Debounce）：适用于“操作结束后才执行”，如搜索框。连续输入时只在最后一次停顿后触发请求和视图更新。
- 节流（Throttle）：适用于“固定间隔取样”，如滚动位置上报、Canvas 动画状态同步。避免每像素滚动都触发更新。
- 两者都应作用于原始数据源，而非渲染层。例如：
const debouncedQuery = useDebounce(searchInput, 400)，后续所有逻辑基于debouncedQuery响应，而不是原始输入。
避免深层响应式代理，用 shallowRef / shallowReactive
当数据结构庞大（如万条表格行），且你只关心整体替换、不依赖单个字段的细粒度更新时，深度响应式就是性能杀手。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
-
shallowRef：只对.value赋值做响应，内部对象属性修改不触发更新。适合缓存整个数据集。 -
shallowReactive：仅代理第一层属性，嵌套对象保持原生。适合列表项结构固定、只按索引增删整行的场景。 - 示例：
const tableData = shallowRef([])；后续tableData.value = newData触发一次更新，而tableData.value[0].name = 'x'完全静默——这正是你需要的“粗粒度控制”。
手动触发更新，跳过无意义的 set 拦截
某些场景下，你明确知道某次赋值不会引起视图变化（比如重复设置相同值、或仅用于内部计算），但 Vue 默认仍会走完整流程。
立即学习“前端免费学习笔记（深入）”；
- 用
triggerRef替代重复赋值：先修改非响应式数据，再统一触发一次更新，避免中间态被追踪。 - 配合
markRaw标记不可响应对象（如第三方库实例、大型静态配置），阻止 Vue 尝试 Proxy 包装。 - 在
watch中加flush: 'post'或使用watchEffect的清理函数，防止副作用嵌套触发多余更新。
批量更新合并，减少渲染次数
Vue 默认已在同一 microtask 内自动合并响应式更新，但若高频更新跨多个 tick（如多次 setTimeout 或 Promise.then），就可能触发多次渲染。
- 把多次数据变更收拢到一个同步块中，例如先更新本地普通对象，最后一次性赋给响应式变量。
- 使用
nextTick+ 批量逻辑封装，确保 DOM 更新前完成所有状态修正。 - 对纯计算类数据，优先用
computed替代watch，利用其缓存机制避免重复执行。
