Vue中仅在Ajax返回数据变更时执行耗时函数的最佳方案

嘿，这个场景我太熟悉了——高频Ajax请求加上耗时函数，确实很容易拖慢应用。咱们用Vue的思路来优雅解决它，核心就是只在数据真的变化时才执行耗时操作，具体方案如下：

1. 管理好定时请求的生命周期，避免内存泄漏
2. 准确对比新旧数据（因为数组是引用类型，直接===对比行不通）
3. 仅当数据差异时，才更新状态并执行耗时函数

var app = new Vue({
  data: {
    people: [],
    isLoading: false // 新增请求锁，防止并发请求堆积
  },
  mounted() {
    // 组件挂载后启动3秒一次的定时请求
    this.requestTimer = setInterval(() => {
      this.loadPeople();
    }, 3000);
  },
  beforeUnmount() {
    // 组件销毁前必须清除定时器，避免内存泄漏
    clearInterval(this.requestTimer);
  },
  methods: {
    loadPeople() {
      // 如果上一次请求还没完成，直接跳过本次请求
      if (this.isLoading) return;
      this.isLoading = true;

      $.ajax({
        method: 'POST',
        dataType: 'json',
        url: base_url + 'users/getParti...'
      })
      .done((newPeople) => {
        // 对比新旧数据：根据你的数据复杂度选合适的方式
        if (!this.isDataEqual(this.people, newPeople)) {
          // 更新响应式数据
          this.people = newPeople;
          // 只有数据变化时才执行耗时函数
          this.doHeavyWork();
        }
      })
      .fail((error) => {
        // 别忘了处理请求失败的情况，方便调试和用户提示
        console.error('加载人员数据失败:', error);
      })
      .always(() => {
        // 请求无论成败，都重置请求锁
        this.isLoading = false;
      });
    },
    // 自定义深比较函数（替代JSON.stringify，支持复杂数据）
    isDataEqual(obj1, obj2) {
      // 引用相同直接返回true
      if (obj1 === obj2) return true;
      // 处理null/undefined的情况
      if (obj1 == null || obj2 == null) return false;
      // 数组对比：先看长度，再逐个元素对比
      if (Array.isArray(obj1) && Array.isArray(obj2)) {
        if (obj1.length !== obj2.length) return false;
        for (let i = 0; i < obj1.length; i++) {
          if (!this.isDataEqual(obj1[i], obj2[i])) return false;
        }
        return true;
      }
      // 对象对比：先看键名数量，再逐个键值对比
      if (typeof obj1 === 'object' && typeof obj2 === 'object') {
        const keys1 = Object.keys(obj1);
        const keys2 = Object.keys(obj2);
        if (keys1.length !== keys2.length) return false;
        for (const key of keys1) {
          if (!keys2.includes(key) || !this.isDataEqual(obj1[key], obj2[key])) return false;
        }
        return true;
      }
      // 基本类型直接值对比
      return obj1 === obj2;
    },
    // 你的耗时函数
    doHeavyWork() {
      // 比如复杂的DOM渲染、大量计算、图表重绘等操作
      console.log('执行耗时业务逻辑...');
    }
  }
});

• 定时器生命周期：在mounted启动定时器，beforeUnmount清除，这是Vue组件的标准做法，防止组件销毁后定时器仍在运行导致内存泄漏。
• 请求并发控制：isLoading锁可以避免前一次请求还没完成就发起新请求，减少服务器压力和前端不必要的处理。
• 数据对比方案：
  • 如果你的数据结构非常简单（没有日期、循环引用、函数等），可以用JSON.stringify(this.people) !== JSON.stringify(newPeople)替代自定义深比较，代码更简洁。
  • 如果数据复杂，自定义的isDataEqual函数或者Lodash的_.isEqual（如果项目已引入）会更可靠。
• 响应式更新：直接赋值this.people = newPeople会触发Vue的响应式系统，自动更新相关视图，无需额外操作。

内容的提问来源于stack exchange，提问作者user7531085