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><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8748" title="vue-composition-api-best-practices"><img
src="https://img.php.cn/upload/skill/000/000/081/179222222327548.jpg" alt="vue-composition-api-best-practices" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8748" title="vue-composition-api-best-practices" class="overflowclass">vue-composition-api-best-practices</a>
<p class="overflowclass">Vue 3 组合式 API 与 <script setup> 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8748" title="vue-composition-api-best-practices" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 第一项
- 第二项
这样，plainText.value 会自动响应 valueHtml 的变化，且始终是干净、无格式的文本（如 "标题 第一项 第二项"）。
注意事项与边界处理
-
不执行脚本/不加载资源：
div.innerHTML = html是安全的 DOM 解析，不会运行<script></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 等库。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
