Vue 3 的 computed 适合响应式提取 HTML 字符串中的纯文本：通过创建临时 div 设置 innerHTML，再取 textContent 并清洗空白，安全高效且零依赖。
Vue 3 的 computed 本身不直接处理富文本解析，但它非常适合做「从 HTML 字符串中安全提取纯文本」的响应式计算——只要把 HTML 内容作为依赖，用逻辑剥离标签、保留语义文本即可。
核心思路：用 computed 封装 HTML → 纯文本转换
富文本内容（如 wangEditor 或 Quill 输出的 valueHtml）通常是带标签的字符串（例如 <p>欢迎<strong>使用</strong></p>）。我们不需要引入 DOM 操作库或正则暴力匹配，而是借助浏览器原生 API，在 computed 中安全、轻量地提取可读文本：
- 创建一个临时
div元素，将 HTML 字符串设为innerHTML - 调用
textContent属性获取纯文本（自动忽略所有标签和样式） - 对结果做基础清洗：去除首尾空白、合并连续空白符（可选）
推荐写法（安全 + 响应式 + 零依赖）
假设父组件通过 v-model 或 props 传入富文本 HTML 字符串：
const valueHtml = ref('<p>标题</p><ul><li>第一项</li><li>第二项</li></ul>')
const plainText = computed(() => {
if (!valueHtml.value?.trim()) return ''
const div = document.createElement('div')
div.innerHTML = valueHtml.value
return div.textContent.trim().replace(/\s+/g, ' ')
})
这样，plainText.value 会自动响应 valueHtml 的变化，且始终是干净、无格式的文本（如 "标题 第一项 第二项"）。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
注意事项与边界处理
-
不执行脚本/不加载资源：
div.innerHTML = html是安全的 DOM 解析，不会运行<script>或请求图片等，适合前端展示前的文本提取 -
避免 XSS 风险：此方式仅用于「显示用途」的文本提取。若需渲染原始 HTML，请务必用
v-html并确保内容已服务端过滤 -
空值/非法 HTML 处理：加
if (!valueHtml.value?.trim()) return ''防止空字符串或 null 导致报错 -
换行转空格：
replace(/\s+/g, ' ')把多个换行、制表符、空格统一为单空格，提升可读性；如需保留换行，可用div.innerText或手动处理textContent中的\n
配合编辑器使用的典型场景
比如在 wangEditor 组件中，你想实时显示「当前内容的摘要（前50字）」：
const excerpt = computed(() => {
const text = plainText.value
return text.length > 50 ? text.slice(0, 50) + '…' : text
})
或用于表单校验：判断用户是否真的输入了有效文字（而非只贴了一张图、一堆空标签）：
const hasContent = computed(() => plainText.value.length > 0)
这种写法轻量、可复用、完全响应式，无需额外工具函数，也无需引入 DOMPurify 或 he 等库。
