how to prevent a re-rendering of a variable that is not being used in the HTML of my vue.js componen-CodePudding

The

in terms of performance this should be the output in the console.log:

what causes this re-rendering and how can I avoid it?

this is my live code:

https://stackblitz.com/edit/vue-l7gdpj?file=src/App.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>

CodePudding user response：

in terms of performance this should be the output in the console.log

In terms of performance, you should use as few reactive data as possible, especially if your object has many properties. I would modify auxData directly.

this.addingData([{ id: 3 }, { id: 2 }, { id: 1 }]);

Simplified addingData

addingData(getDataFetch) { // It's faster to get the id-s first let itemDict = new Set(this.auxData.map((m) => m.id)); getDataFetch.forEach((item) => { if (!itemDict.has(item.id)) { this.auxData.unshift(item); itemDict.add(item.id); } }); },

And iterate over it

<div v-for="item in auxData"> {{ item.id }} </div>

Also watching object list can also cause performance issues. It should be used on primitive values.

Example on StackBlitz

CodePudding user response：

Looks like you should be using v-for with auxData as that's what you're updating using the result of your API call (myData). As your API sends you new results, use a watcher to run a function whenever a new update is made to then also update auxData

updated stackblitz

watch: { myData(newData, oldData) { console.log('Entering AddingData', newData); if (newData.length !== 0) { if (this.auxData.length === 0) { this.auxData = newData; } else { newData.forEach((item) => { const isNewItem = this.auxData.find((itemAux) => { return item.id === itemAux.id; }); if (!isNewItem) { this.auxData.unshift(item); } }); } } }, },

<div v-for="item in auxData"> {{ item.id }} </div>