Vue中使用code标签的组件prop变更时未重新渲染如何解决？

• 你的代码片段组件使用了语法高亮工具（如Prism.js、highlight.js），这类工具会在首次渲染时解析<code>标签内的文本，将其替换为包含多个<span>的高亮DOM结构，覆盖了Vue原本的响应式文本插值节点，因此后续prop更新时Vue找不到对应的更新位置，导致视图没有同步变化。

有两种常用方案，按实现成本从低到高选择即可：

方案1：绑定key强制组件重新渲染 #

在父组件调用CodeSnippest时，给组件绑定和code同步变化的key属性，每次code更新时Vue会销毁旧组件、创建新组件，自动触发高亮逻辑重新执行：

<code-snippest :sourcecode="code" :key="code" />

该方案不需要修改代码片段组件本身，适合快速解决问题。

方案2：手动监听prop变化更新高亮 #

修改CodeSnippest组件，监听sourcecode的变化，手动更新代码内容后重新调用高亮方法：

<template>
  <pre class="language-html" id="code-section">
    <code ref="codeBlock">{{sourcecode}}</code>
  </pre>
</template>

<script>
export default {
  name: "CodeSnippest",
  props: {
    sourcecode: String,
  },
  watch: {
    sourcecode(newVal) {
      // 更新代码内容
      this.$refs.codeBlock.textContent = newVal
      // 替换为你使用的高亮库对应方法，以下为示例：
      // Prism.js 调用：Prism.highlightElement(this.$refs.codeBlock)
      // highlight.js 调用：hljs.highlightElement(this.$refs.codeBlock)
    }
  },
  mounted() {
    // 初始化时执行首次高亮
    // Prism.highlightElement(this.$refs.codeBlock)
    // hljs.highlightElement(this.$refs.codeBlock)
  }
}
</script>

该方案性能更好，不会频繁销毁重建组件。

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