0
私はVueが反応性の高いコンテンツを更新するのが遅いという問題があります。Vueリアクティブコンテンツをすばやく更新するにはどうすればよいですか？
ユーザーがリストからアイテムを選択するようにします。アイテムが選択されているときは、マークする必要があります。テストのために、私はちょうど選択された項目の周りに境界を設定しています。問題は複数のアイテムがある場合、Vueが選択したアイテムのクラスを更新（反応）するのに非常に時間がかかると感じています。
だから私は、次のようになります簡単な反応店舗があります。私は多くの項目が含まれます単純なリストをレンダリング私のコンポーネントにこの店を渡す
export default new Vuex.Store({
state: {
selections: []
},
mutations: {
set_selections (state, sel) {
state.selections = sel;
}
}
})
を。
<p v-for="item in items">
<span v-bind:class="{ 'is-selected': isSelected(item) }" v-on:click="onSelect(item)">
{{ item.name }}
</span>
</p>
onSelect: function(item, event){
let itemId = item._id;
let sel = this.selections;
if (sel.indexOf(itemId) !== -1) {
var index = sel.indexOf(itemId);
sel.splice(index, 1);
} else {
sel.push(itemId);
}
this.$store.commit("set_selections", sel);
},
ところ、
selections: function() {
return this.$store.state.selections;
}
フェッチ計算されたプロパティです現在の選択。
項目が選択されているかどうかを確認するため、DOM要素に「ある-選択し、」クラスを追加し、以下のように見える方法：
isSelected: function(item){
let itemId = item._id;
let sel = this.selections;
if (sel.indexOf(itemId) !== -1) {
return true;
}
return false;
},
問題を 私はで多くのアイテムを持っている場合私のリスト反応的な内容は非常に鈍いと感じます。アイテムをクリックすると、アイテムがマークされる前に約500ms〜1秒かかります。 （私は非常に多くのアイテムを持っていることに注意してください）。私はおそらく何か間違っていますか？ v-forを使用してループしているので、時間がかかる可能性があるすべてのアイテムに対してVueがisSelectedメソッドを再計算する必要があることを理解しています。
もちろん私はクラスをonClickイベントで直接追加/削除することができましたが、その後Vueを使用している点がすべて緩んでいます。どのようにこの問題に対処しますか？
Vueのは、リスト全体を再描画する必要がないように、これは、ほとんどのコンポーネントにあなたのリスト項目をリファクタリングすることによって解決されます。 – Bert
しかし、どうしたらいいですか？私はまだそれらをレンダリングするために各項目をループする必要がありますか？代わりに "isSelected"がコンポーネントで計算された場合、更新されるときに各アイテムで "isSelected"が呼び出されます。 – Euklides
もちろん、変更されたコンポーネントだけを再描画する必要があります。リストのすべてではありません。実際の例をフィドル/ペンでまとめると、リファクタリングに取り組むことができます。 – Bert