插槽内容本身不直接导致父组件重复渲染，但父组件响应式状态变化会触发整个模板（含插槽作用域绑定、计算属性、子组件props）重新求值；若子组件未隔离处理，可能引发连带重渲染。
插槽内容本身不会直接导致父组件重复渲染，但当父组件的响应式状态变化时，整个模板（包括插槽作用域内的绑定、计算属性或子组件 props）会重新求值。如果插槽被用在子组件内部，而该子组件又未做隔离处理，父组件更新就可能触发子组件整块重渲染——尤其当子组件包裹大量静态或低频变动内容时，这种“连带更新”会放大性能开销。
插槽引发重复渲染的典型场景
常见于以下几种情况：
-
作用域插槽中使用了父组件的响应式变量：例如
<child><template>{{ parentCount }} - {{ scope.item.name }}</template></child>，一旦parentCount变化，即使scope.item没变，整个插槽内容也会重新渲染。 -
子组件未对插槽内容做缓存控制：子组件模板里直接展开插槽（
<slot></slot>），没有配合v-memo或v-once划定稳定边界。 - 父组件频繁触发更新（如定时器、输入监听），而插槽内包含耗时计算或大量 DOM 节点，加剧渲染压力。
用 v-memo 锁定插槽中稳定部分
关键思路是：把插槽中「不随父组件状态变化而更新」的内容单独包裹，用 v-memo 标记其依赖项。Vue 会跳过这部分的 VNode 创建和比对。
例如，一个表格子组件接收插槽用于自定义行内容，但其中某些列始终静态：
<MyTable :data="rows">
<template #row="row">
<!-- 这些字段极少变动，可缓存 -->
<div v-memo="[row.id, row.avatar]">
<img :src="row.avatar" alt="" />
<span>{{ row.username }}</span>
</div>
<pre class="brush:php;toolbar:false;"><!-- 这部分可能实时更新，保持动态 -->
<div class="status">{{ row.statusLabel }}</div>
只要 row.id 和 row.avatar 不变，头像和用户名区域完全跳过重渲染，哪怕父组件的 filterText 或 sortKey 在持续变化。
搭配 v-once 处理真正静态的插槽片段
如果插槽某部分内容在整个生命周期内都不变（比如页眉说明文字、版权信息、固定操作按钮），直接用 v-once 更轻量：
<MyDialog>
<template #header>
<h3 v-once>用户详情</h3>
<p v-once>此弹窗展示只读信息，不支持编辑</p>
</template>
</MyDialog>注意：v-once 适用于彻底静态内容；v-memo 更适合「条件性静态」——即依赖某些值，值不变就不更新。
避免 v-memo 误用的两个要点
用错依赖数组反而会掩盖更新，务必确认：
-
依赖必须覆盖所有影响渲染结果的响应式来源：比如用了
computed属性，要把其依赖项（而非 computed 本身）写进数组，否则缓存不会失效。 -
不要对高频变动字段设为依赖：若把
lastUpdatedTime这类每秒刷新的字段放进v-memo数组，等于放弃缓存价值，还增加比对开销。
