网上有不少教程，但是实际使用还是有些问题需要记录：

参考: https://blog.csdn.net/qq_54123885/article/details/120826318

https://www.osuu.net/1456.html

1 配置和初始化

1 按照文章说的配置会报错，提升MathJax引入的错误，后来看了官网才发现，配置必须在引入js之前进行。即在index.html中加入:

<script>
  window.MathJax = {
        tex: {
            inlineMath: [
                ['$', '$'],
                ['\\(', '\\)']
            ], // ⾏内公式选择符
            displayMath: [
                ['$$', '$$'],
                ['\\[', '\\]']
            ] // 段内公式选择符
        },
        options: {
            skipHtmlTags: ['script', 'noscript','style', 'textarea', 'pre', 'code',
            'a'], // 避开某些标签
            ignoreHtmlClass: 'tex2jax_ignore',
            processHtmlClass: 'tex2jax_process'
        }
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="Ma thJax-script"></script>

注意对MathJax的配置一定要在引入js之前进行。

2 内容更新时渲染

const TypeSet = async function (elementId) {
    if (!window.MathJax) {
        return
    }
    window.MathJax.startup.promise = window.MathJax.startup.promise
        .then(() => {
            return window.MathJax.typesetPromise()
        })
        .catch((err) => console.log('Typeset failed: ' + err.message))
    return window.MathJax.startup.promise
}

公式应该放在什么标签中?

可以放在tex中，或者是span标签中。MathJax会自动识别符合条件的公式。

然后在内容发生更新的时候调用TypeSet。TypeSet放在哪里都可以。

3 TypeSet的调用时机

1: 在OnMounted时必须调用

2: 在OnUpdate时调用，发现没什么用。Vue的update这个钩子被调用的时机很迷，一般不会考虑调用这个。

3: 常见的情景是：输入什么内容，然后更新公式渲染。这时需要对输入内容进行监视。比如输入的内容，通过v-model绑定到input变量中，在span中显示output的内容：
数据流动：
<input></input> => input
output => <span></span>

watch(()=> input.value,
	(newValue)=>{
		output.value = newValue
		TypeSet()
	}
)