MathJax 3 配置和上手渲染数学公式及在Vue中的使用

mathjax是一个用于latex、mathml和ascimath表示法的开源javascript显示引擎。mathjax的3.0版是对mathjax的彻底重写，实现了组件化，可以实现不同需求的定制，使用和配置与mathjax2版本有很大的不同，所以一定要注意版本。

最近在重构一个项目时，新增了一个需求支持latex数学公式渲染和编辑。在经过一番调研对比后，目前浏览器兼容性比较好的有两个，分别是KateX和MathJax。

性能对比截图

MathJax3

MathJax2.7

KaTex

从对比中可以看出MathJax版本2和3都是用使用 tex-chtml ，但之间的性能差距孩挺大的。Katex的渲染性能会比MathJax3好一些，但复杂公式的渲染效果不如MathJax，实际使用差别不大。最终选择了MathJax3，其中很大的主导因素是一个有项目依赖关系的兄弟部门里面已经在使用。

Vue中的使用

一般接触到一些新知识点，笔者都会先想办法借鉴一下大佬们的使用经验，上github看一下开源项目。

后面的内容可能对justforuse老哥不太友好，但还得感谢老哥提供的思路。所以开始之前得先强调一下，所有的开源项目和作者的努力及成果都应该得到尊重，后面的内容只是想陈述一下我看到的和为什么自己造了个轮子。

vue-mathjax的用法

主要代码：

export default {
  //...
  watch: {
    formula () {
      this.renderMathJax()
    }
  },
  mounted () {
    this.renderMathJax()
  },
  methods: {
    renderContent () {
      if (this.safe) {
        this.$refs.mathJaxEl.textContent = this.formula
      } else {
        this.$refs.mathJaxEl.innerHTML = this.formula
      }
    },
    renderMathJax () {
      this.renderContent()
      if (window.MathJax) {
        window.MathJax.Hub.Config({
          // ...
        })
        window.MathJax.Hub.Queue([
          'Typeset',
          // ...
        ])
      }
    }
  }
}

看完整个项目之后，产生了几个疑问