我之前也碰到过完全一样的问题——Vue单页应用里加载带MathML的CKEditor内容，MathJax死活不渲染，毕竟它默认只在页面首次加载时扫一遍DOM，SPA组件切换或内容动态更新时根本不会重新处理新的MathML节点。下面给你几个亲测有效的解决方案：

方案一：手动触发MathJax重新渲染（最直接可控） #

首先确保你已经在项目的index.html里引入了MathJax的CDN（你提供的链接就没问题）：

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

然后在负责渲染CKEditor内容的Vue组件里，通过生命周期钩子+watch监听，在DOM更新完成后手动调用MathJax的渲染API：

<template>
  <!-- 用ref标记容器，方便后续指定渲染范围 -->
  <div ref="mathContainer" v-html="ckeditorHtml"></div>
</template>

<script>
export default {
  props: {
    ckeditorHtml: {
      type: String,
      required: true
    }
  },
  mounted() {
    // 组件挂载完成后首次渲染公式
    this.renderMathFormulas()
  },
  watch: {
    // 当CKEditor数据动态更新时，重新渲染
    ckeditorHtml() {
      // 用$nextTick确保v-html已经更新了DOM
      this.$nextTick(() => {
        this.renderMathFormulas()
      })
    }
  },
  methods: {
    renderMathFormulas() {
      // 检查MathJax是否已加载完成
      if (window.MathJax) {
        // 只渲染当前组件内的容器，避免全局扫描提升性能
        MathJax.typeset([this.$refs.mathContainer])
        
        // 如果需要异步处理（比如等待渲染完成后做其他操作），可以用typesetPromise：
        // await MathJax.typesetPromise([this.$refs.mathContainer])
      }
    }
  }
}
</script>

关键细节说明： #

• 使用$nextTick：因为v-html更新DOM是异步的，必须等DOM完全更新后再调用MathJax，否则会找不到新的MathML节点。
• 指定渲染范围：通过ref获取组件内的容器，只渲染这个区域的内容，比全局MathJax.typeset()性能更好，尤其是页面有大量内容时。
• 防抖优化：如果你的CKEditor数据会频繁更新（比如实时编辑场景），可以给renderMathFormulas加防抖，避免频繁触发渲染：

  import { debounce } from 'lodash'
  
  export default {
    created() {
      // 300ms内只触发一次渲染
      this.renderMathFormulas = debounce(this.renderMathFormulas, 300)
    },
    // ...其他代码
  }
  

方案二：使用Vue封装的MathJax插件（更省心） #

如果你不想手动处理生命周期，可以找现成的Vue封装插件，比如vue-mathjax这类工具（注意选择支持MathML的版本）。这类插件会自动监听DOM变化，帮你触发MathJax的渲染，不过本质上和方案一的原理是一样的。

不过我个人更推荐方案一，因为手动控制的方式更灵活，也更容易排查问题。

额外注意事项 #

• 确认MathJax配置：你的CDN链接已经包含了config=TeX-AMS-MML_HTMLorMML，这个配置已经开启了MathML支持，不用额外修改。
• 避免冲突：如果你的项目里同时使用了其他渲染数学公式的库（比如KaTeX），要确保它们不会和MathJax冲突。

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