Vue使用MathJax数学公式无法刷新的问题解决

需求

在弹窗中el-select选择不同公式，显示公式及参数用于简单公式计算器功能。

问题

1. 使用<span>展示公式，只显示第一次渲染的公式，无法刷新，在<el-select>的@change方法中每次将对应值赋空也不行。
2. 参数显示会叠加，之前渲染的不消失。
3. 以上均为渲染刷新的问题。

解决

渲染特定的组件（跟问题没关系，顺手记录）

在组件上绑定id属性，将id传给渲染的方法，如下。渲染的span和form均放在一个<div>标签中，给其赋id：<div id="varCalculate"> </div>

this.$nextTick(function() { // 这里要注意，使用$nextTick等组件数据渲染完之后再调用MathJax渲染方法，要不然会获取不到数据
        if (this.commonsVariable.isMathjaxConfig) { // 判断是否初始配置，若无则配置。
          this.commonsVariable.initMathjaxConfig()
        }
        this.commonsVariable.MathQueue('varCalculate')// 传入组件id，让组件被MathJax渲染
      })

组件强制刷新（方法一：key法）

开始尝试给绑定的变量textVar每次渲染获取数据前赋空，渲染失败。使用强制渲染的方法：vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。（原文链接.）
给需要强制刷新的span和form均绑定了key，实现清除上次渲染的公式重新渲染。

<template>
  <div>
    <span :key="key"></span>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        key: 0
      }
    },
    methods: {
      handleUpdateClick() {
        this.key += 1 
      }
    }
  }
</script>

组件强制刷新（v-if法）

组件中添加：v-if="resetThis"
在该组件数据内容变化的方法里，使用

this.resetThis = false
this.$nextTick(() => {
this.resetThis = true
})