Performance issues with large table in Vue.js

Question

As a learning exercise, I've been adapting an existing, working web application to use Vue.js (it's a technology I'm interested in for another project). I'm just wondering whether there are some tips and tricks I need to know about as regards handling large tables (of e.g. 1000-1500 rows).

In my existing web application, I simply loop through the Javascript array of products, building the HTML for the table body by string concatenation and then inserting it into the empty table via JQuery. This works fine in performance terms, although of course it looks a little messy and maintainability isn't great.

For my Vue.js version, I instead used a template block, i.e:

<template v-for="product in productList">

The resultant HTML appears to be identical. But for some reason or other, the Vue.js version is a little sluggish in response. For example, when I click on a select in one of the product rows, it takes half a second or so for the options to appear, and having selected one, there is a similar delay in updating the row class.

For various reasons it's impractical for me to be able to put the actual source code for this up on something like Fiddle, although I'm trying to create a simplified reproducible example. I was just wondering, though, what the difference might be between a Vue-managed table and a straight HTML one, such that I might be able to home in on what's causing this unexpected sluggishness.

Oh, and in case you're thinking it's a bad idea to have tables of this many rows, this is for an in-house web application, with known, tested clients, and the performance of the pure HTML version is fine.

Answer 1

Yes, this is a drawback with Vue and MVVM libraries in general. What Vue actually does is create a new Vue instance for each item in the loop and bind it to data which slows down rendering but speeds up updates. Unfortunately, there appears to be no way to make v-for faster, so you have to work around it, see this issue: https://github.com/vuejs/vue/issues/2000