前端优化:数据监听触发多次请求

最新推荐文章于 2025-09-19 16:04:50 发布

原创最新推荐文章于 2025-09-19 16:04:50 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端优化

vue 专栏收录该内容

32 篇文章

订阅专栏

本文探讨了在Vue中使用监听值刷新请求时遇到的问题，即多个值改变时触发多次请求，导致性能下降。通过引入全局状态控制，实现了只在必要时调用请求方法，有效避免了重复请求。

场景复现:在列表中使用监听值刷新请求,多个值的情况下,每一个改变值都会触发getList方法,从而导致的多次请求的出现

在这里插入图片描述

代码复现

  computed: {
    watchendDate() {
      return this.params.startDate;
    },
    watchPointType() {
      return this.params.pointType;
    }
  },
  watch: {
    watchendDate(n) {
      this.getList();
    },
    watchPointType(n) {
      this.getList();
    }
  }

目前的解决方法

定义一个全局状态值为false的字段offFirstEnter,当getList()有成功返回时再将offFirstEnter修改为true

解决之后的代码

  watch: {
    watchendDate(n) {
      if(!this.offFirstEnter){return;}
      this.getList();
    },
    watchPointType(n) {
      if(!this.offFirstEnter){return;}
      this.getList();
    }
  }

? 大功告成,解决之后页面请求请求就只有一次了