如何让绑定v-html的函数仅执行一次？——解决Vue组件Tab切换时HTML重复渲染问题

看起来你遇到的核心问题是标签页切换时组件重渲染，导致appendPresetHtml()被反复调用，进而重复追加HTML内容。这是因为Vue在组件重新渲染时，会重新执行v-html绑定的方法，而如果你的方法里直接操作DOM进行追加，就会导致内容重叠。下面是一套针对性的解决方案：

1. 核心思路：缓存已生成的HTML内容 #

最直接的办法是为每个preset的HTML内容做缓存，确保同一个preset只生成一次HTML。这样不管组件渲染多少次，都会直接返回缓存好的内容，不会重复生成。

步骤1：添加缓存对象到组件data #

在组件的data中新增一个用于缓存的对象，用preset.id作为唯一键：

data() {
  return {
    // 其他已有数据...
    presetHtmlCache: {} // 用于缓存每个preset的HTML内容
  }
}

步骤2：修改appendPresetHtml方法 #

改造你的方法，先检查缓存，没有的话再生成HTML并存入缓存，同时不要在方法里直接操作DOM追加内容（这是之前重叠的根源之一），而是返回完整的HTML字符串让v-html去渲染：

appendPresetHtml(preset) {
  // 先检查缓存中是否已有该preset的HTML
  if (this.presetHtmlCache[preset.id]) {
    return this.presetHtmlCache[preset.id];
  }

  // 这里是你的动态HTML生成逻辑，替换成你实际的代码
  const generatedHtml = `
    <div class="preset-content">
      <!-- 你的动态内容，比如preset的标题、预览图等 -->
      <h5>${preset.name}</h5>
      <p>${preset.description}</p>
    </div>
  `;

  // 将生成的HTML存入缓存
  this.presetHtmlCache[preset.id] = generatedHtml;
  return generatedHtml;
}

2. 优化组件渲染，减少不必要的重执行 #

你当前模板中在v-for里用v-if调用filteredPresets()方法，这会导致每次组件渲染时都反复执行过滤逻辑，不仅影响性能，也可能加剧重渲染问题。建议改成计算属性来提前过滤数据：

步骤1：添加计算属性和监听 #

computed: {
  filteredTemplatePresets() {
    // 获取当前激活的标签页对应的bannerDesign
    const currentBanner = this.availableBannerDesigns[this.tabIndex];
    // 提前过滤符合条件的preset
    return this.templatePresets.filter(preset => this.filteredPresets(preset, currentBanner));
  }
},
// 可选：如果需要监听tabIndex变化做额外处理
watch: {
  tabIndex(newIndex) {
    // 这里可以做一些标签页切换后的逻辑，比如重置某些状态
  }
}

步骤2：修改模板中的遍历逻辑 #

把原来的v-for和v-if合并，直接遍历计算好的过滤后数组：

<b-tabs id="presets-tab" pills class="consent-type-tab" v-model="tabIndex">
  <b-tab v-for="bannerDesign in availableBannerDesigns" :key="bannerDesign">
    <b-form-radio-group name="preset-list" v-model="selectedPreset.id">
      <template v-for="(preset, index) in filteredTemplatePresets">
        <b-form-radio 
          :value="preset.id" 
          :key="preset.id" <!-- 建议用唯一的id作为key，比name更可靠 -->
          :disabled="isRecommendedPresetDisabled(preset)" 
          @change="selectPreset(preset, index)"
        >
          <div 
            v-html="appendPresetHtml(preset)" 
            :id="'preset-box-'+ preset.id" 
            :class="[ 
              'preset-'+ preset.settings.theme, 
              isRecommendedPresetDisabled(preset) ? 'radio-opacity preset-'+ preset.settings.consentBarType : 'preset-'+ preset.settings.consentBarType
            ]"
          ></div>
        </b-form-radio>
      </template>
    </b-form-radio-group>
  </b-tab>
</b-tabs>

3. 关键注意事项 #

• 避免直接操作DOM：Vue的核心是数据驱动视图，v-html已经负责渲染内容，不要在appendPresetHtml里用document.getElementById去修改DOM，否则会和Vue的渲染逻辑冲突，导致内容重叠。
• key的可靠性：把v-for的key从preset.name改成preset.id，确保每个列表项的唯一标识更可靠，避免Vue复用组件时出现奇怪的渲染问题。
• 缓存的清理：如果你的templatePresets数据会动态更新（比如从后端重新获取），记得在数据更新时清空presetHtmlCache，避免显示旧的缓存内容。比如：

// 假设你有一个获取preset的方法
async fetchPresets() {
  this.presetHtmlCache = {}; // 清空缓存
  this.templatePresets = await api.getPresets();
}

这样修改后，每个preset的HTML只会生成一次，不管切换多少次标签页，都不会再出现内容重叠的问题了。

内容的提问来源于stack exchange，提问作者theFrontEndDev