Vue.jsで10万件のリストを表示する - Qiita

はじめに Vue.jsは軽量ですが、数万件のリストを並べるとそりゃ普通につらい。 だから目に見えるとこ以外はdom描いてもらうのやめるってコードです。 デモ デモ(jsfiddle) コード <div id="app"> <div style="overflow:auto;height:170px;" @scroll="getScrollParam"> <ul :style="listStyle"> <li style="height:17px" v-for="num in displayList">{{num}}</li> </ul> </div> </div> new Vue({ el: '#app', data: function(){ return { list:list, scroll:0,//スクロール量 scrollMax: (list.length - displayRow

[kwbtsts]

マシンにも優しい実装

[razokulover]

良い

[ajishixo]

こちらのtweetも参考にさせて頂く。 "listはpropsにしてscrollMaxはcomputedにするといい" https://mobile.twitter.com/wonderful_panda/status/795786348909064192

[bigchu]

: Recyclerview 的な

[ysk_lucky-star]

10万件だとインラインスタイルをやめるだけでレンダリングのパフォーマンスが変わってきそう

[musign]

めずらしいVirtual Scrollの実装例だ