Vue3中SshPre组件无法实时渲染Axios返回数据问题求助

• SshPre 组件默认仅在首次挂载时对插槽内的代码内容执行一次高亮解析，没有监听插槽内容的动态变化，当 Vuex 中的 decodeData 更新后，组件不会自动重新执行高亮逻辑。
• 单独使用 <pre> 标签可以正常渲染，说明 Vuex 状态的响应式逻辑正常，问题出在 SshPre 组件自身的更新机制。

方案1：绑定key强制组件重渲染（最简单通用） #

给 ssh-pre 标签绑定 key 属性，属性值和你要渲染的代码内容关联，当内容更新时key变化会触发组件完全重新挂载，自动执行高亮逻辑。同时注意布尔类型的属性需要用 v-bind 绑定，否则会被解析为字符串。

修改后的模板代码如下：

<div class="fileContent" >
  <ssh-pre 
    language="js" 
    copy-button 
    label="Javascript" 
    :dark="true"
    :key="$store.state.git.decodeData"
  >
    <pre>{{ this.$store.state.git.decodeData }}</pre>
  </ssh-pre>
</div>

如果渲染的代码内容过长，担心绑定内容作为key有性能问题，也可以在 Vuex 的 git 模块中新增一个版本号状态，每次调用 setDecodeData 时版本号自增，把版本号作为 key 的值即可。

方案2：手动调用组件刷新方法 #

如果 SshPre 组件暴露了重新高亮的实例方法（通常命名为refresh、update之类，可参考组件的使用说明），可以通过 ref 获取组件实例，监听 decodeData 的变化后手动调用刷新方法：

<template>
  <div class="fileContent" >
    <ssh-pre 
      ref="sshPre"
      language="js" 
      copy-button 
      label="Javascript" 
      :dark="true"
    >
      <pre>{{ this.$store.state.git.decodeData }}</pre>
    </ssh-pre>
  </div>
</template>

<script>
export default {
  watch: {
    '$store.state.git.decodeData'() {
      this.$nextTick(() => {
        this.$refs.sshPre?.refresh?.()
      })
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Juwon-Yun