vue2 流式数据怎么渲染

Vue2中的流式数据渲染通常通过`v-if`或`v-show`指令来动态控制元素的显示与隐藏。在你的例子中，对于数学公式自动转换，使用了MathJax库来实时更新数学公式，当组件挂载（mounted钩子）时，会等待MathJax库加载完成后再执行渲染：

// 在mounted生命周期钩子中
mounted() {
  this.renderMathJax();
}

methods: {
  // 渲染MathJax的方法
  renderMathJax() {
    setTimeout(() => {
      if (MathJax) { // 检查MathJax是否存在
        MathJax.typesetPromise([document.getElementById('math')]).then(() => {
          // 成功渲染后执行其他操作，如显示元素
          this.showFormula();
        });
      } else {
        console.error('MathJax not loaded');
      }
    }, 200);
  },
  showFormula() { // 当公式渲染完成后，显示元素
    document.getElementById('math').classList.remove('hidden'); // 或者使用对应的CSS类名
  }
}

在这个场景中，`renderMathJax`方法会在MathJax可用后异步调用`typesetPromise`，当解析和渲染成功时，会触发`showFormula`方法以显示已经转换成数学公式的元素。

然而，如果你想要在Vue3中实现类似的功能，可能需要借助自定义指令或者事件总线，因为Vue3不再推荐直接操作DOM。你可以创建一个计算属性来跟踪MathJax的状态，并根据状态来决定何时显示公式结果。

相关问题：
1. Vue3中如何替代`v-if`或`v-show`来处理流式数据？
2. 如何在Vue3中利用计算属性跟踪MathJax的状态？
3. Vue3的自定义指令能用来做哪些流式数据渲染？