面试题：Vue 2.0 的 v-html 指令不再支持使用过滤器，还有哪些处理 HTML 内容的方法？

这是一个关于 Vue 2.0 版本升级后特性的经典问题。在 Vue 2.0 中，v-html 指令确实不再支持过滤器（filters），这是与 Vue 1.x 的一个重要区别。

❌ 错误做法（Vue 2 不支持）：

<div v-html="rawHtml | myFilter"></div>

✅ 正确的替代方法

以下是几种在 Vue 2 中安全、有效地处理 HTML 内容的方法：

一、1. 使用计算属性（Computed Property）

这是最推荐的方式，将 HTML 处理逻辑放在 computed 中。

<template>
  <div v-html="processedHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<p style="color: red;">Hello <strong>World</strong></p>'
    }
  },
  computed: {
    processedHtml() {
      // 在这里进行 HTML 处理
      let html = this.rawHtml

      // 示例：添加前缀
      html = '[Processed] ' + html

      // 示例：简单替换（注意：不要用正则处理复杂 HTML）
      html = html.replace(/World/g, 'Vue')

      return html
    }
  }
}
</script>

✅ 优点：

逻辑清晰，易于测试。

响应式更新。

符合 Vue 的数据驱动理念。

二、2. 使用方法（Methods）

在模板中调用方法处理 HTML。

<template>
  <div v-html="processHtml(rawHtml)"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<p>Hello World</p>'
    }
  },
  methods: {
    processHtml(html) {
      // 处理 HTML
      return `[From Method] ${html}`
    }
  }
}
</script>

⚠️ 注意：

方法在每次渲染时都会执行，可能影响性能。

不如 computed 高效（无缓存）。

三、3. 使用第三方库处理 HTML

对于复杂的 HTML 操作（如转义、清理、高亮），推荐使用专业库。

常见场景与库：

场景	推荐库	示例
HTML 转义/反转义	`he` (HTML Entities)	`he.encode('<div>') → '<div>'`
清理 HTML（防 XSS）	`DOMPurify`	`DOMPurify.sanitize(dirtyHtml)`
Markdown 渲染	`marked`	`marked('# Hello') → '<h1>Hello</h1>'`
代码高亮	`highlight.js`	`hljs.highlightElement(el)`

示例：使用 `DOMPurify` 防 XSS

import DOMPurify from 'dompurify'

export default {
  data() {
    return {
      userContent: '<script>alert("xss")</script><p>Safe content</p>'
    }
  },
  computed: {
    safeHtml() {
      return DOMPurify.sanitize(this.userContent)
    }
  }
}

<template>
  <div v-html="safeHtml"></div>
</template>

✅ 强烈建议：任何来自用户输入的 HTML，都应使用 DOMPurify 等工具清理，防止 XSS 攻击。

四、4. 使用 `v-text` 或普通插值（避免 `v-html`）

如果不需要渲染 HTML 标签，只是显示文本内容，应避免使用 v-html。

<!-- 显示原始 HTML 字符串（不解析） -->
<div v-text="rawHtml"></div>
<!-- 或 -->
<div>{{ rawHtml }}</div>

✅ 更安全：不会执行潜在的恶意脚本。

五、5. 使用自定义指令（高级）

可以创建自定义指令来封装 HTML 处理逻辑。

Vue.directive('safe-html', {
  bind(el, binding) {
    const cleanHtml = DOMPurify.sanitize(binding.value)
    el.innerHTML = cleanHtml
  },
  update(el, binding) {
    const cleanHtml = DOMPurify.sanitize(binding.value)
    el.innerHTML = cleanHtml
  }
})

<template>
  <div v-safe-html="userContent"></div>
</template>

⚠️ 注意：自定义指令需手动处理更新逻辑。

六、总结：处理 HTML 内容的最佳实践

方法	适用场景	推荐指数
计算属性 + 处理逻辑	通用处理、格式化	⭐⭐⭐⭐⭐
第三方库（如 DOMPurify）	防 XSS、HTML 清理	⭐⭐⭐⭐⭐（安全必备）
方法调用	简单处理，不频繁更新	⭐⭐⭐
`v-text` / `{{ }}`	显示原始 HTML 文本	⭐⭐⭐⭐
自定义指令	通用 HTML 处理逻辑复用	⭐⭐⭐⭐

✅ 核心原则：

永远不要信任用户输入的 HTML。

使用 DOMPurify 等库清理后再用 v-html。

优先使用 computed 封装处理逻辑。

能用 v-text 就不用 v-html。

通过这些方法，你可以在 Vue 2 中安全、灵活地处理 HTML 内容，弥补 v-html 不支持过滤器的限制。

THE END

Vue 基础面试题