多层 props 透传不直接导致抖动，但会放大渲染压力、增加响应式开销、诱发意外重绘；应优先用 provide/inject 替代深层透传，配合 markraw、readonly、防抖、虚拟滚动及占位策略综合优化。
多层 Props 透传本身不直接造成“抖动”，但会放大渲染压力、增加响应式开销、诱发意外重绘，最终表现为视觉卡顿或页面跳动。关键不在层数本身，而在数据结构、更新频率和组件行为是否失控。
用 provide/inject 替代中间层透传
当数据需跨越三层以上（如 Layout → Page → Section → List → Item），每层 props 接收+转发都会创建新的响应式引用副本，不仅冗余，还会让 Vue 在 diff 阶段追踪更多依赖。用 provide/inject 可让顶层直接供给、底层精准注入，跳过中间组件的数据持有。
- 顶层组件中：provide(readonly(markRaw(data))) —— markRaw 阻止代理膨胀，readonly 保证只读语义
- 真正消费的子组件中：const data = inject('key')，无需声明 props，也不参与中间层响应式链
- 避免在中间组件里做无意义的
defineProps(['data'])+...$attrs转发，这类代码既是性能负担，也是维护雷区
大数据只传 ID 或摘要，详情按需加载
“抖动”常源于 DOM 批量重排：比如万级列表一次性渲染、图片未设宽高导致回流、卡片高度随内容浮动。与其优化传递路径，不如减少传递总量。
- 父组件只传
itemIds: string[]或items: { id, title, avatar }[]这类轻量结构 - 子组件点击/悬停时，再通过事件通知父组件拉取完整数据，或自己调用
fetchDetail(id) - 列表场景强制启用虚拟滚动（如
vue-virtual-scroller），确保 props 永远只含可视区域的 20–50 条，DOM 节点数恒定
切断高频更新与渲染的强绑定
搜索框输入、鼠标移动、滚动监听等高频触发源，若直接驱动 props 更新，会导致子组件被频繁推入更新队列，引发连续 layout → paint → composite，肉眼可见抖动。
- 防抖逻辑必须上移到父组件：用
useDebounce管理关键词，仅当稳定后才更新ref并作为 prop 传出 - 子组件接收的是“已防抖”的值，内部不再 watch 或 debounce，避免定时器嵌套和清理遗漏
- 对纯展示型 props（如日志数组、配置对象），用
markRaw包裹后再传，防止 Vue 对其建立深层响应式代理，节省内存与依赖追踪开销
控制渲染节奏：v-show + 占位 + 固定尺寸
视觉抖动未必来自 JS 性能，更常见于样式层面：元素加载前后高度突变、图片撑开容器、字体 FOIT/FOUT 导致重排。
- 用
v-show替代v-if控制显隐，避免 DOM 销毁重建引发的布局重算 - 为异步内容预留占位块（如 skeleton），设置固定宽高与背景色，保证容器尺寸稳定
- 图片标签强制写
width和height属性，配合object-fit，防止加载完成时页面“跳一下”
