0

What are some ways to implement real-time list processing in vue3 without delay?

Is there a simple way to show the order book of the cryptocurrency exchange neatly and coolly without interruption or delay?

Output is being made using a normal v-for code with vue3. Orderbook data is updated several times per second, but there is a delay in updating the screen.

<div 
     v-for="item in askList"
     :key="`tick_${item}`">

     <div class="divTableRow"
          v-if="showAskEnable"> 
          <div class="divTableCell ask-light">
             <span>{{ formatTickData(item.tick) }} </span>   
          </div>
     </div>
</div>

If you recommend other development frameworks other than vue3, or if you have any reference materials, please share them without hesitation.

Created initially using q-table tag in quasar. Later, the same phenomenon as above was found, so I proceeded with the normal table tag and finally wrote it using the div tag.

cokeys90
  • 1
  • Dude you have to use reactivity system in vue. things like ref and reactive. learn more here: https://vuejs.org/guide/essentials/reactivity-fundamentals.html. you can implement it by options api and composition api – Ali Bahrami Feb 15 '23 at 06:10
  • Are you talking about a delay of a few seconds, a few minutes, or somewhere in between? You have to find out what is causing the delay. Is your data slow to load over the network? You're using a formatting function called `formatTickData` - what is it doing, and how do you know that it isn't the culprit? You also don't mention how large the dataset is. If it's very large, you can look into using virtualization to render the list so that Vue isn't stuck repeatedly rendering huge amounts of data. – stellr42 Feb 15 '23 at 18:52

0 Answers0