在 vuejs 中实现简单的 markdown 指令，反应性问题答案

【问题标题】：Implementing simple markdown directive in vuejs, reactivity problem在 vuejs 中实现简单的 markdown 指令，反应性问题
【发布时间】：2021-01-18 20:54:03
【问题描述】：

我尝试实现一个非常简单的 Markdown 格式化指令（只是粗体、强调和删除线）以更加独立于 vue-18n 格式化。当前指令如下所示：

    import _Vue from 'vue';
    
    const emphasize = (str: string) => {
      const matched = /(\*|_)(.*?)(\*|_)/gm;
      return str.replace(matched, '<em>$2</em>');
    };
    
    const strong = (str: string) => {
      const matched = /(\*\*|__)(.*?)(\*\*|__)/gm;
      return str.replace(matched, '<strong>$2</strong>');
    };
    
    const strikeThrough = (str: string) => {
      const matched = /~~(.*?)~~/gm;
      return str.replace(matched, '<s>$2</s>');
    };
    
    const fromMd = (str: string) => strikeThrough(emphasize(strong(str)));
    
    export default {
      install: (Vue: typeof _Vue): void => {
        /* eslint-disable no-param-reassign */
        Vue.directive('tmd', {
          bind(el: HTMLElement) {
            el.innerHTML = fromMd(el.innerHTML);
          },
          inserted(el: HTMLElement) {
            el.innerHTML = fromMd(el.innerHTML);
          },
          update(el: HTMLElement) {
            el.innerHTML = fromMd(el.innerHTML);
          },
        });
      },
    };

我是这样使用的：

<p v-tmd >{{ $t('path-to-translation', ) }}</p>

到目前为止，它运行良好，但问题是，当我更改语言时，指令似乎没有更新。它接收到updated 事件，但el.innerHTML 没有更新，所以它呈现旧的。实现这种行为的最佳做法是什么？

【问题讨论】：

标签： typescript vue.js vuejs2 vue-i18n

【解决方案1】：

我不确定为什么解析 el.innerHTML 不起作用，但您可以改为解析 vnode 文本：

export default {
  install: Vue => {
    const childrenTextToMd = (el, binding, vnode) => {
      if (vnode.children) {
        el.innerHTML = vnode.children
          .map(child => fromMd(child.text))
          .join('')
      }
    }

    Vue.directive('tmd', {
      inserted: childrenTextToMd,
      update: childrenTextToMd
    })
  }
}

旁注： strikeThrough() 可以替换 $2，但只有一个捕获组，所以应该是 $1。

demo

【讨论】：