Vue中实现敏感词实时检测应优先用watch监听v-model绑定的响应式变量，或用@input事件配合防抖调用过滤逻辑；推荐前端DFA算法提升效率，并注意输入长度过滤、结果缓存及非阻塞UI提示。
Vue 中实现输入框文本变化时的敏感词实时检测，核心是捕获输入内容变动，并在变动后立即调用敏感词过滤逻辑。关键不在于“监听”本身有多复杂，而在于触发时机是否及时、过滤逻辑是否高效、响应是否不卡顿。
用 watch 监听输入值变化（推荐）
当使用 v-model 绑定输入框时，数据已同步到 Vue 实例的 data 或 setup 响应式变量中。直接监听该变量即可：
- 对简单字符串字段（如
message），watch 可立即响应每次输入 - 无需额外绑定事件，代码简洁，逻辑集中
- 配合防抖可避免高频触发（尤其对接后端或复杂 DFA 过滤时）
示例（Vue 2）：
data() {
return {
message: '',
hasSensitive: false
}
},
watch: {
message: {
handler(newVal) {
this.hasSensitive = this.containsSensitiveWord(newVal)
},
immediate: false // 不需初始校验
}
}
用 @input 事件 + 函数调用（更可控）
相比 change（仅失焦触发），@input 在每次按键/粘贴/删除时都触发，适合真正“实时”场景：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- 能拿到原始
event.target.value，便于做前置清洗（如去空格、转小写） - 可同步执行防抖（
setTimeout+clearTimeout），防止连续输入导致多次过滤 - 便于在函数内统一处理校验、提示、高亮等副作用
示例片段：
<input v-model="message" @input="onInput" />
methods: {
onInput() {
clearTimeout(this.debounceTimer)
this.debounceTimer = setTimeout(() => {
this.hasSensitive = this.checkSensitive(this.message)
if (this.hasSensitive) this.showWarning()
}, 150)
}
}
敏感词过滤建议用前端轻量 DFA 实现
纯前端检测需兼顾速度与内存。不建议每次用 includes 或正则遍历全部词库：
- 构建一次 DFA 树（如基于《敏感词过滤黑科技》中的 Map 嵌套结构），初始化完成即复用
- 单次检测时间复杂度接近 O(n)，n 是输入长度，不受词库大小影响
- 支持最小/最大匹配模式，可返回命中词位置，方便做高亮或替换
- 词库建议预加载（JSON 文件或接口一次性获取），避免每次检测都请求
注意 UI 响应与用户体验细节
实时检测不是“越快越好”，而是“快得合理”：
- 输入过短（如 ≤ 2 字）可跳过检测，减少无效计算
- 检测结果建议缓存（如
lastCheckedText === current），避免重复执行 - 命中敏感词时，用 class 切换或图标提示，而非弹窗打断输入流
- 若需后端协同（如动态词库、用户白名单），前端先做快速初筛，再异步校验
