应监听筛选字段值回归初始状态来触发图表清空,而非监听重置按钮点击;推荐用 computed 封装重置判断逻辑并 watch 该布尔值,配合 immediate 和请求时序控制确保状态一致。

监听筛选条件重置事件并清空图表数据,关键不是“监听重置动作本身”,而是监听那些被重置的筛选字段——当它们变回初始值时,触发图表数据清空逻辑。Vue 3 的 watch 适合做这件事,因为它能捕获变化、区分新旧值,并支持精准控制执行时机。
监听筛选字段数组,识别重置行为
多数重置操作本质是把多个 ref(如 keyword、dateRange、category)设为默认值。你可以用数组方式统一监听它们,在回调中比对是否全部回到了初始状态:
- 定义初始值常量(如
const initFilter = { keyword: '', dateRange: [], category: 'all' }) - 用
watch([keyword, dateRange, category], ([k, dr, c], [oldK, oldDr, oldC]) => { ... }) - 在回调里判断:
if (k === '' && dr.length === 0 && c === 'all'),就认为发生了重置 - 此时调用清空图表数据的方法,比如
chartData.value = []或resetChart()
用 computed 提取“是否处于重置态”,再单独 watch
语义更清晰,也便于复用和测试。把重置判断逻辑封装进一个计算属性,只监听这个布尔值:

