核心是让 props 保持稳定：Vue 子组件重渲染取决于 props 引用是否变化；避免内联对象/数组/函数，改用 reactive、shallowRef 或 markRaw；将状态判断上移、用 toRefs/toRef 精准传值；配合 key、v-memo 和 keep-alive 锁定更新边界。
核心是让 props 保持稳定——不是不让它变，而是只在真正需要时才变。Vue 子组件是否重渲染，关键看它收到的 props 引用是否变化。浅比较下，新对象、新数组、内联函数都会触发更新，哪怕内容完全一样。
别在模板里传内联对象或数组
每次父组件渲染，:config="{ theme: 'dark' }" 都会创建一个新对象，子组件判定为“props 变了”，立刻重渲染。
- ✅ 在
setup或data中提前定义响应式配置：const config = reactive({ theme: 'dark', size: 'large' }) - ✅ 复杂配置用
shallowRef包裹，跳过深度响应式代理开销 - ✅ 配置项极少变动，直接用
markRaw脱离响应式系统
把状态判断逻辑上移到父组件
比如列表项是否激活，别传 :active-id="currentId" 给每个子项（所有子项都监听 currentId），而应传 :active="item.id === currentId"。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- ✅ 只有真正匹配的那一项，
active值会变；其余子项 props 完全不变，跳过更新 - ✅ 对布尔/字符串/数字类简单值，确保传递的是稳定基础类型，不是动态计算表达式
用 toRefs 拆解响应式对象再传
直接传整个 reactive 对象，子组件一接收就追踪全部字段，哪怕只用其中一两个，也会因其他字段变化被连带更新。
立即学习“前端免费学习笔记（深入）”；
- ✅ 父组件中用
const { name, avatar } = toRefs(user)，再分别传给子组件 - ✅ 若子组件只读不改，用
toRef(user, 'name')更精准，避免多余依赖 - ❌ 避免
:user="user"这种整对象传递，尤其在 v-for 列表中影响放大
配合 key 和 v-memo 锁定更新边界
props 稳定了，还要告诉 Vue：这部分结构真的不用动。
- ✅ 列表项用业务唯一 ID 当
key，别用index；增删排序时节点能复用 - ✅ 静态区块加
v-memo="[config.theme, isLoaded]"，只有这两个依赖变才重渲染 - ✅ 路由页面加
<keep-alive>，避免切换时反复创建销毁
