多层 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，防止加载完成时页面“跳一下”