计算属性配合正则实现关键词高亮，核心是解耦匹配逻辑与渲染准备：computed 返回带标签的安全片段，动态构造RegExp、空关键词防护、replace回调精准包裹、返回新数组不改原始数据，v-html仅用于highlightedTitle等可信字段，需转义用户输入、节流防卡顿、自动缓存，避免直接调方法、split+join及未转义特殊字符等坑。
计算属性配合正则实现关键词高亮，核心是把“匹配逻辑”和“渲染准备”解耦到响应式系统中——不直接操作 DOM，也不在模板里拼 HTML，而是让 computed 返回已处理好的、带 标签的安全片段。
用 computed 封装高亮函数
把高亮逻辑写成一个可复用的计算属性 getter，接收原始数据和搜索词，返回新数组。每项包含原始字段（如 title）和新增的 highlightedTitle 字段：
- 正则必须动态构造：
new RegExp(keyword, 'gi')，g 确保全局替换，i 忽略大小写 - keyword 为空时提前 return 原文本，避免
RegExp('','gi')报错 - 用
String.prototype.replace()的函数式回调，确保只包裹匹配内容，不破坏原始结构 - 返回新对象数组，不修改原始 data，保持响应式纯净
模板中安全使用 v-html
高亮后的字段只能通过 v-html 渲染，但必须限制可控范围：
- 只对明确来自 highlightTitle 这类计算字段使用
v-html="item.highlightedTitle" - 原始文本若含用户输入，需先做 HTML 实体转义（如
替换 <code>），再高亮，防 XSS - 标签本身安全，但禁止让用户控制 class 名、style 属性或插入任意 HTML
- 若原始字段是富文本（如含
），应先用
textContent或 DOMPurify 剥离标签，再对纯文本高亮
支持多字段与模糊场景
实际搜索常涉及标题、描述、作者等多个字段，且需兼顾性能：
- 对每个需高亮字段单独调用高亮逻辑，生成
highlightedTitle、highlightedDesc等只读字段 - 长文本（如 >200 字）可截断后再高亮，避免正则回溯卡顿
- 列表量大时，配合
lodash.debounce节流输入，减少 computed 频繁重算 - 关键词未变、原始数据未变时，computed 自动缓存结果，无需额外 memoize
避免常见坑点
看似简单，但几个细节不注意就出问题：
- 别在
v-html中直接调用方法（如v-html="highlight(item.title, key)"），会绕过响应式追踪，且每次渲染都执行 - 不要用
split + join替代正则 replace，无法处理重叠匹配或特殊字符（如+、.） - 正则中的特殊字符（如
( ) [ ] . * + ?）需先转义，否则报错或误匹配；可用keyword.replace(/[.*+?^${}()|[]\]/g, '\$&') - 不区分大小写匹配时，
replace回调里的match是原文本大小写，不是 keyword 的大小写，直接包裹即可
