VueJS performance issues with a table loaded from an array - vuejs2

Question

I have a performance problem with VueJS. I have a table with X rows, which I load through an array. The problem is that when I change a single element of the array, it renders all the array again, and therefore, performs all the conditions again (v-if, if inside v-bind:class, etc.). I leave a jsfiddle where from a table, hide only 1 element, and update the whole table again.
https://jsfiddle.net/toledorobia/0twghfya/
$(function(){
var users = [];
for (var i = 1; i <= 100; i++) {
users.push({
id: i,
name: faker.name.findName(),
email: faker.internet.email(),
visible: true
});
}
var app = new Vue({
el: "#app",
data: {
users: users
},
methods: {
random: function() {
return faker.random.number();
},
toggleRows: function(){
this.users[5].visible = !$(this.$refs.togglerows).is(":checked");
}
}
});
});
<div id="app">
<div>
<input type="checkbox" ref="togglerows" v-on:click="toggleRows" /> Hide some rows
</div>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr v-for="u in users" v-if="u.visible">
<td>{{ u.id + ' ' + random() }}</td>
<td>{{ u.name }}</td>
<td>{{ u.email }}</td>
</tr>
</tbody>
</table>
</div>
How can I avoid this behavior?
Thanks in advance.

Answer 1

Because everything is rendered in the same scope, when you show/hide the single row you want, Vue is forced to re-render all the rows. Instead, isolate the scope of the changes using a component.
Vue.component("row",{
props:["user"],
template:`
<tr>
<td>{{ user.id }}</td>
<td>{{random()}}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>`,
methods:{
random: function() {
return faker.random.number();
},
}
})
And your main template ends up looking like this:
<tbody>
<tr is="row" v-for="u in users" :key="u.id" v-if="u.visible" :user="u"></tr>
</tbody>
Here is the updated fiddle.