Vue中mount()里querySelector无法获取markdown-it-vue生成的code标签

这个问题我之前也碰到过！核心原因是markdown-it-vue的Markdown解析渲染是异步操作——当组件的mounted钩子执行时，它还没完成HTML的生成和插入，所以此时用querySelectorAll只能找到你手写的<code>foobar</code>，而组件生成的<code>标签还没出现在DOM里。

下面给你两种解决方案，按需选择：

方案一：用$nextTick等待DOM更新完成 #

如果只是临时需要操作DOM，最简单的方式就是用Vue的$nextTick方法，它会在当前DOM更新周期结束后执行回调，这时候markdown-it-vue的渲染已经完成了。

代码示例： #

<template>
  <div ref="content">
    <markdown-it-vue :content="content" />
    <code>foobar</code>
  </div>
</template>

<script>
export default {
  props: {
    content: String,
  },
  mounted() {
    // 等待DOM更新完成后再查询元素
    this.$nextTick(() => {
      this.queryAndReplaceCode()
    })
  },
  watch: {
    // 当content动态变化时，也要重新执行查询替换
    content() {
      this.$nextTick(() => {
        this.queryAndReplaceCode()
      })
    }
  },
  methods: {
    queryAndReplaceCode() {
      this.$refs.content.querySelectorAll('code').forEach(code => {
        console.log('找到code标签：', code)
        // 这里写你的替换逻辑，比如：
        // code.textContent = `替换后的内容：${code.textContent}`
      })
    }
  }
};
</script>

方案二：自定义markdown-it插件（更优雅） #

直接操作DOM其实不符合Vue“数据驱动”的设计理念，更优雅的方式是在markdown-it的解析阶段就修改<code>标签的内容，从根源上解决问题。

markdown-it支持自定义插件，我们可以重写它的代码渲染规则，直接修改要输出的内容：

代码示例： #

<template>
  <div ref="content">
    <markdown-it-vue :content="content" :options="mdOptions" />
    <code>foobar</code>
  </div>
</template>

<script>
export default {
  props: {
    content: String,
  },
  data() {
    return {
      mdOptions: {
        use: [
          (md) => {
            // 重写「行内代码」的渲染规则
            const defaultInlineRender = md.renderer.rules.code_inline || function(tokens, idx, options, env, self) {
              return self.renderToken(tokens, idx, options);
            };
            md.renderer.rules.code_inline = function(tokens, idx, options, env, self) {
              const token = tokens[idx];
              // 在这里修改代码内容，比如给行内代码加前缀
              token.content = `[行内代码] ${token.content}`;
              // 调用默认渲染生成最终HTML
              return defaultInlineRender(tokens, idx, options, env, self);
            };

            // 如果需要处理「代码块」，同样重写规则
            const defaultBlockRender = md.renderer.rules.code_block || function(tokens, idx, options, env, self) {
              return self.renderToken(tokens, idx, options);
            };
            md.renderer.rules.code_block = function(tokens, idx, options, env, self) {
              const token = tokens[idx];
              // 修改代码块内容
              token.content = `[代码块]\n${token.content}`;
              return defaultBlockRender(tokens, idx, options, env, self);
            };
          }
        ]
      }
    };
  }
};
</script>

这种方式的好处是：不需要操作DOM，完全遵循Vue的响应式逻辑，当content变化时会自动重新渲染并应用修改，稳定性更高。

内容的提问来源于stack exchange，提问作者nowox