vue2接口数据变化页面不变

Vue 2 中，当接口返回的数据发生变化但页面不需要更新时，你可以通过 Vue 的 `v-if` 或者 `v-show` 组件条件渲染结合 `keep-alive` 功能来实现。`v-if` 指令会销毁元素并创建新的，而 `v-show` 只是切换元素的可见性。

1. 使用 `v-if`:

<template>
  <div v-if="!isDataChanged">
    <!-- 数据未变更时的内容 -->
  </div>
  <div v-if="isDataChanged" :key="item.id"> <!-- 这里假设item是你接口返回的对象 -->
    <!-- 数据变更后的内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDataChanged: false,
      // 你的接口数据
      dataList: []
    };
  },
  methods: {
    fetchData() {
      this.$http.get('/api/data').then(response => {
        if (response.data !== this.dataList) { // 判断是否数据有变
          this.isDataChanged = true;
          this.dataList = response.data; // 更新数据
        }
      });
    }
  },
  created() {
    this.fetchData();
  },
  updated() {
    // 如果需要的话，在每次数据变化后再次触发请求
    this.fetchData();
  }
};
</script>

2. 使用 `keep-alive` 和路由守卫：
如果是在单页应用中，可以将包含动态数据的部分组件放在 `keep-alive` 区域内，并结合 `meta` 字段或路由守卫判断是否缓存该组件实例。

当你从一个视图跳转到另一个视图，然后又回到原视图时，之前的数据将会保持不变，直到数据真正改变才会重新渲染。