应将过滤器逻辑抽成独立工具函数，在 watch 中直接调用；新建 src/utils/filters.js 导出纯函数 formatDate，组件中 import 后使用，避免依赖 this.$options.filters，确保跨平台兼容、可测试且符合分层设计。
watch 里不能直接调用过滤器函数
过滤器（Vue.filter 注册的函数）不是普通工具函数，它没有被挂载到 this 上，也不在组件实例作用域内可访问。你在 watch 回调里写 this.$options.filters.formatDate(value) 看似可行，但实际有三个硬伤：一是小程序平台 this.$options.filters 为空对象；二是 H5 下虽存在，但过滤器签名强制要求第一个参数是待处理值，而你传参方式容易错位；三是违背过滤器设计初衷——它只服务于模板渲染，不是业务逻辑层的转换工具。
想在 watch 里做数据转换，该用什么替代
把过滤器逻辑抽成独立函数，再在 watch 中调用。这不是“绕路”，而是正确分层：
- 新建
src/utils/filters.js，导出纯函数：export const formatDate = (value, format = 'yyyy-MM-dd') => { if (!value) return '' const d = new Date(value) if (isNaN(d.getTime())) return '' const year = d.getFullYear() const month = String(d.getMonth() + 1).padStart(2, '0') const day = String(d.getDate()).padStart(2, '0') return format === 'yyyy-MM-dd' ? `${year}-${month}-${day}` : d.toLocaleDateString('zh-CN') } - 在组件中
import { formatDate } from '@/utils/filters' -
watch里直接用：watch: { rawDate(newVal) { this.formattedDate = formatDate(newVal) } }
为什么别强行从 $options.filters 拿
即便 H5 下 this.$options.filters.formatDate 能取到函数，也存在明显风险：
- 小程序和 App 平台中，
this.$options.filters是空对象，运行时返回undefined，调用时报TypeError: Cannot read property 'call' of undefined - 过滤器函数内部若用了
this（比如误写成箭头函数又试图访问实例属性），会直接undefined报错 - 无法在函数内使用
uniAPI 或异步操作，而你可能在 watch 里需要触发请求或 toast，过滤器机制根本不支持 - 单元测试困难——过滤器绑定在 Vue 构造函数上，无法单独 import 测试
watch + 过滤器逻辑的典型误用场景
常见错误是想让 watch 自动同步一个「经过过滤器处理」的副本字段，结果写出这样的代码：
data() {
return {
input: '',
lowerInput: '' // 错误：期望靠 watch + 过滤器自动更新
}
},
watch: {
input(newVal) {
// ❌ 错误：formatText 是全局过滤器，this.formatText 不存在
this.lowerInput = this.formatText(newVal)
}
}
真正该做的是：用计算属性或工具函数。如果只是大小写转换，toLower 就是标准 JS 方法，没必要走过滤器一层；如果是复杂格式化（如带千分位、单位缩写），就按上面说的，抽成工具函数，在 watch 或 computed 里调用——清晰、可控、全平台一致。
