Vue 3 中怎么用 computed 实现密码强度等级（弱、中、强）的实时计算-Vue.js-PHP中文网

Vue 3 中用 computed 实时计算密码强度等级最自然高效，通过正则检测字符类型得分并结合长度判断，自动响应、无冗余执行、逻辑清晰。

vue 3 中怎么用 computed 实现密码强度等级（弱、中、强）的实时计算

直接用 computed 实时算出强度等级，是 Vue 3 最自然、最高效的做法。它不依赖手动监听、不重复执行、不污染 data，所有逻辑都声明清楚、自动响应。

核心思路：用正则分类型打分，再映射等级

密码强度本质是“字符多样性 + 长度”的组合。常见且实用的判断逻辑是：

检查是否含小写字母（/[a-z]/）
检查是否含大写字母（/[A-Z]/）
检查是否含数字（/[0-9]/）
检查是否含特殊符号（/[^a-zA-Z0-9]/）
统计满足的类别数（0～4），再结合长度做微调（如：长度＜6 直接归为弱）

代码写法：在 setup 中定义 computed

假设你已用 ref 或 reactive 管理密码字段（比如 password）：

const password = ref('')

const strength = computed(() => {
  if (!password.value) return ''
  
  const pwd = password.value
  let score = 0
  
  if (/[a-z]/.test(pwd)) score++
  if (/[A-Z]/.test(pwd)) score++
  if (/[0-9]/.test(pwd)) score++
  if (/[^a-zA-Z0-9]/.test(pwd)) score++

  // 长度不足6，哪怕有多种类型也降级为弱
  if (pwd.length = 3) return '强'

  return '弱'
})

模板中直接使用，实时更新

不需要额外事件或 watch，只要输入变化，strength 就自动重算：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

<input v-model="password" type="password" placeholder="请输入密码"><p v-if="strength" :class="'strength-' + strength">密码强度：{{ strength }}</p>

配合简单 CSS，就能实现颜色/图标变化（例如 .strength-弱 { color: #ff6b6b; }）。

为什么不用 watch？

watch 是用来“做事”的，比如提交、弹提示、发请求；而计算一个值（如强度等级），就是 computed 的本职工作。用 watch 手动更新一个变量，不仅多写几行，还会绕过响应式缓存，导致不必要的重复执行——尤其当用户快速输入时，性能和可维护性都更差。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！