hideName过滤器需按字数分情况脱敏：2字不处理，3字隐中间1字，≥4字隐中间所有字；仅用于展示态，禁用于v-model；用Array.from()确保Unicode兼容；不可在computed中直接用|语法。
过滤器函数名必须叫 hideName 才能复用
UniApp 里没有内置姓名脱敏过滤器，得自己写一个通用的 hideName。名字长度不同（2字、3字、4字以上）处理逻辑不一样，不能简单固定截取第2位。常见错误是写成 value.substr(0,1) + '**' + value.substr(-1)，结果“李四”变成“李**四”，“王小明”变成“王**明”，漏掉中间字数判断。
正确做法是按字符长度分情况处理：
- 2 字：显示首尾，中间不补星号（即“李四” → “李四”，不脱敏）
- 3 字：隐藏中间 1 字（“王小明” → “王*明”）
- ≥4 字：隐藏中间所有字，只保留首尾（“欧阳修文” → “欧**文”）
示例实现（放在 @/common/filters/index.js）：
Vue.filter('hideName', function(value) {
if (!value || typeof value !== 'string') return ''
const len = value.length
if (len === 2) return value
if (len === 3) return value[0] + '*' + value[2]
if (len >= 4) return value[0] + '*'.repeat(len - 2) + value[len - 1]
return value
})
v-model 和过滤器不能混用在同一个字段上
如果页面中用了 v-model="userInfo.name" 绑定输入框，又在模板里写 {{ userInfo.name | hideName }}，那用户一输就会看到脱敏后的值（比如刚打“张”，显示“张”；打完“张三丰”，显示“张*丰”），体验错乱。过滤器只该用于「展示」，不该介入「编辑」流程。
关键区分点：
- 编辑态（表单输入）：直接用原始
userInfo.name，不做任何过滤 - 展示态（如用户资料页、列表项）：才用
{{ userInfo.name | hideName }}
别试图在 input 的 @input 里手动调用 hideName 去改原始数据——这会破坏双向绑定，也违背数据源单一原则。
小程序端对中文字符长度判断要小心 .length
JavaScript 的字符串 .length 在多数现代环境（包括 H5、App、微信小程序基础库 ≥ 2.20.0）对中文是按 Unicode 码点计数的，一个汉字算 1，没问题。但极少数旧版小程序或安卓低端 WebView 可能有兼容问题，导致“?”这类增补平面字符被误判为 2 个字符。
稳妥做法是用 Array.from(value).length 替代 value.length，它能正确识别所有 Unicode 字符，包括 emoji 和生僻汉字：
Vue.filter('hideName', function(value) {
if (!value || typeof value !== 'string') return ''
const chars = Array.from(value)
const len = chars.length
// 后续逻辑同上，用 chars[0], chars[len-1] 替代 value[0], value[len-1]
})
过滤器无法响应式更新计算属性依赖的变量
如果把 hideName 用在 computed 里，比如：computed: { maskedName() { return this.name | hideName } }，这行不通——| 是模板语法，不能在 JS 中直接使用。JS 里得手动调用 Vue.filter('hideName')(this.name)，但这样绕过了 Vue 的依赖追踪，this.name 变了，maskedName 不会自动更新。
真正安全的做法只有两种：
- 模板中直接用
{{ name | hideName }}（推荐，响应式天然支持） - 在 data 或 setup 中定义响应式变量，例如
maskedName: computed(() => hideNameFn(props.name))，其中hideNameFn是你抽离出的纯函数，不依赖 Vue 实例
别图省事把过滤器逻辑塞进 computed 函数体里还带 this.$options.filters 调用——这会让代码难以测试，且在 Vue3 Composition API 下不可靠。
