javascript - 如何防止重新呈现未在我的 vue.js 组件的 HTML 中使用的变量？

Question

我正在尝试重新创建我的代码的真实示例。在我的真实代码中，这一行实际上是一个组件，它将每隔几秒获取一个端点，并获取一个随机数组“n” length, myData 它将包含这些提取。

<div v-for="item in addingData(myData)">  <!-- in My real code, "myData" should be the answer of an endpoint, is an setInterval, returns data like [{id:1},{id:2}] -->
  {{ item.id }}
</div>

我在 setTimeOut 的帮助下模拟 myData 中的响应变化

mounted() {
  setTimeout(() => {
    console.log('First data');
    this.myData = [{ id: 3 }, { id: 2 }, { id: 1 }];
    setTimeout(() => {
      console.log('second data');
      this.myData = [{ id: 4 }, { id: 4 }];
      setTimeout(() => {
        console.log('Third data');
        this.myData = [];
      }, 3000);
    }, 3000);
  }, 2000);
},

我试图做到这一点，每次我在 myData 中接收数据时，都会显示接收到的数据的串联列表，而不会出现重复数据。这就是为什么每次我收到数据时，都会调用函数 addingData(myData) 来执行此数据串联。我正在使用函数 v-for="item in addingData(myData) 并且 auxData 是将执行此连接的变量。

为什么当有新数据时，addingData函数被调用了2次，如何避免？

就性能而言，这应该是 console.log 中的输出:

是什么导致了这种重新渲染，我该如何避免？

这是我的实时代码:

https://stackblitz.com/edit/vue-l7gdpj?file=src%2FApp.vue

<template>
  <div id="app">
    <div v-for="item in addingData(myData)">
      {{ item.id }}
    </div>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  data() {
    return {
      myData: [],
      auxData: [],
    };
  },
    mounted() {
      setTimeout(() => {
        console.log('First data');
        this.myData = [{ id: 3 }, { id: 2 }, { id: 1 }];
        setTimeout(() => {
          console.log('second data');
          this.myData = [{ id: 4 }, { id: 4 }];
          setTimeout(() => {
            console.log('Third data');
            this.myData = [];
          }, 3000);
        }, 3000);
      }, 2000);
    },
  methods: {
    addingData(getDataFetch) {
      console.log('Entering AddingData', getDataFetch);
      if (getDataFetch.length !== 0) {
        if (this.auxData.length === 0) {
          //Adding initial data
          this.auxData = getDataFetch;
        } else {
          //prevent duplicated values
          getDataFetch.forEach((item) => {
            const isNewItem = this.auxData.find((itemAux) => {
              return item.id === itemAux.id;
            });
            if (!isNewItem) {
              //adding new data 
              this.auxData.unshift(item);
            }
          });
        }
      } else {
        //if there is not data, return []
        return this.auxData;
      }
    },
  },
};
</script>

Answer 1

据我了解，您希望将来自多个 API 调用的唯一对象组合成一个数组，并使用 v-for 将它们显示到模板中。如果是，您可以通过使用 computed 属性来实现。

当您每次收到响应时更新 myData，您可以将唯一对象插入一个单独的数组，然后使用计算属性返回该数组。

现场演示:

new Vue({
  el: '#app',
  data: {
    combinedData: [],
    myData: []
  },
  mounted() {
    setTimeout(() => {
      console.log('First data');
      this.myData = [{ id: 3 }, { id: 2 }, { id: 1 }];
      this.pushData(this.myData)
      setTimeout(() => {
        console.log('second data');
        this.myData = [{ id: 4 }, { id: 4 }];
        this.pushData(this.myData)
        setTimeout(() => {
          console.log('Third data');
          this.myData = [];
          this.pushData(this.myData)
        }, 3000);
      }, 3000);
    }, 2000);
  },
  methods: {
    pushData(data) {
      data.forEach(obj => {
        if (!JSON.stringify(this.combinedData).includes(JSON.stringify(obj))) {
          this.combinedData.push(obj)
        }
      });
    }
  },
  computed: {
    finalData() {
        return this.combinedData
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="item in finalData">
    {{ item.id }}
  </div>
</div>