Vuejs v-for は無限スクロールで非常に遅れます

Question

新しいオブジェクト データを追加すると、v-for は、すでにレンダリングされているオブジェクトであっても、すべてのオブジェクトを再レンダリングするという奇妙な vuejs 効果があります。

フェイスブックのような無限スクロールを実装しています。

＃＃＃コード＃＃＃

このコードを説明するために、firebase から新しいデータを取得し、それが画面の一番下に到達したときにデータ オブジェクトにプッシュします。

リーリー リーリー

さて、ここで問題が…

この画面記録を見てください。

マウスにフォーカスしています

。非常にラグがあり、vuejs が新しいデータを追加してロードしている間はボタンをクリックすることさえできません

これは私が使用するコードです

何を疑うのか

新しいデータが追加されるたびに、VueJS がすべてのデータを再レンダリングし、この影響を引き起こしているのではないかと思います。すでに画面上にレンダリングされたデータを再レンダリングしないように vueJS を強制するにはどうすればよいですか?

Answer 1

不要な asyncIIFE が 2 つあります。forEach の 2 つ目は、その中の非同期コードがループ反復ごとに同時に実行されるため、特に問題があります。これには次のような影響があります。

1. getDocs() はループ反復ごとにすぐに起動し、サーバーにスパム送信する可能性があります (これがネットワーク リクエストを実行していると仮定します)。これはあなたの意図ですか？新しい投稿は最大 5 件までしか取得できないようなので、おそらく大丈夫でしょう。
2. 非同期関数は一部の状態を更新し、Vue による各ドキュメントの再レンダリングをトリガーします。 Vue の更新を最小限に抑えるために、これを最後にまとめてバッチ処理する必要があります。

また、var は使用せず、代わりに const または let を使用してください。 var を使用する正当な理由はもうほとんどありません。廃止してください。

これによってパフォーマンスが大幅に向上するとは言えませんが、次の変更をお勧めします (未テスト):

リーリー

テンプレートで実行 :post-content="truncateString(linkify(post.data().post_content))" は、 linkify が再レンダリングのたびに実行されることを意味します。 linkify は長いリストでは遅いのではないかと思います。事前に投稿ごとに計算することはできますか?

コンポーネントをインストールすると、ウィンドウ スクロール イベント リスナーが登録されます。コンポーネントが破棄された場合は、イベント リスナーの登録を解除する必要があります。そうしないと、ウィンドウがスクロールされるたびにイベント リスナーが起動されてしまいます。これはあなたのケースでは問題にならないかもしれませんが、再利用可能なコンポーネントの場合は必要です。