插槽内容本身不直接导致父组件重复渲染，但父组件响应式状态变化会触发整个模板（含插槽作用域绑定、计算属性、子组件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><!-- 这些字段极少变动，可缓存 --><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><h3 v-once>用户详情</h3>
    <p v-once>此弹窗展示只读信息，不支持编辑</p>
  </template></mydialog>

注意：v-once 适用于彻底静态内容；v-memo 更适合「条件性静态」——即依赖某些值，值不变就不更新。

避免 v-memo 误用的两个要点

用错依赖数组反而会掩盖更新，务必确认：

• 依赖必须覆盖所有影响渲染结果的响应式来源：比如用了 computed 属性，要把其依赖项（而非 computed 本身）写进数组，否则缓存不会失效。
• 不要对高频变动字段设为依赖：若把 lastUpdatedTime 这类每秒刷新的字段放进 v-memo 数组，等于放弃缓存价值，还增加比对开销。