アレイからロードされたテーブルでVueJSのパフォーマンスが問題になる

Question

VueJSでパフォーマンスに問題があります。私は配列をロードするX行のテーブルを持っています。問題は、配列の1つの要素を変更すると、すべての配列が再びレンダリングされるため、すべての条件が再度実行されることです（v-if、v-bind内のクラスの場合など）。私はテーブルからjsfiddleを残し、1つの要素だけを隠し、テーブル全体を再度更新します。

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> 

どのように私はこの動作を回避することができますか？

ありがとうございます。

Answer 1

すべてが同じスコープでレンダリングされるため、必要な単一の行を表示/非表示にすると、Vueはすべての行を再レンダリングします。代わりに、コンポーネントを使用して変更のスコープを分離します。

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(); 
    }, 

    } 
}) 

そして、あなたのメインのテンプレートは、このように見える終わる：ここ

<tbody> 
    <tr is="row" v-for="u in users" :key="u.id" v-if="u.visible" :user="u"></tr> 
</tbody> 

が更新fiddleです。