提高性能 - 循环项 - Vue JS
Improve Performance - Loop Items - Vue JS
我有一家电子商务在线商店，其中包含包含商品的类别和包含所有可用商品（有货）的一页。
有些类别有近 1500 个项目。所有可用产品的页面有近 4000 个项目。
我可以用 api 非常快地加载所有内容，项目的有效负载在 50 毫秒到 300 毫秒（大小为 90kb，较大者）内交付。
开头只显示了30个项目。当用户滚动到页面底部时，我使用 vue-observe-visibility 来加载更多内容。因此它“每页”或“视图”加载 30 个项目。
项目使用我在其中循环的项目组件。
示例
<div v-for="value in filteredRecords.slice( 0, 30)" :key="value.id">
<item-card
:product_id="value.id"
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')"
:product_price="value.product_price"
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale"
:heart="true" v-if="!mobile">
<item-card-for-mobile
:product_id="value.id"
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')"
:product_price="value.product_price"
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale"
:quickview="true"
v-else>
<div>
我测试了它，当用户滚动很多并且产品的增量达到 1250 个项目时，例如，在更改页面时（例如带有文本的空白页面，没有 api 调用）单个页面应用程序需要 4 到 6 秒才能更改。
有没有办法让它更有效率？
tips 提高列表的性能：
- 使用virtual scroller component
- 不要在 v-for 中使用 v-if，尤其是如果列表很大，请始终使用 v-show.
这种情况下，可以这样处理
<div v-for="value in filteredRecords.slice( 0, 30)" :key="value.id" v-if="!mobile">
<item-card
:product_id="value.id"
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')"
:product_price="value.product_price"
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale"
:heart="true">
<div>
<div v-for="value in filteredRecords.slice( 0, 30)" :key="value.id" v-else>
<item-card-for-mobile
:product_id="value.id"
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')"
:product_price="value.product_price"
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale"
:quickview="true"
>
<div>
(ps 这是一个小的代码重复但是它避免了检查 N 次 mobile prop)
- 有机会时使用 v-once directive
我有一家电子商务在线商店，其中包含包含商品的类别和包含所有可用商品（有货）的一页。
有些类别有近 1500 个项目。所有可用产品的页面有近 4000 个项目。
我可以用 api 非常快地加载所有内容，项目的有效负载在 50 毫秒到 300 毫秒（大小为 90kb，较大者）内交付。
开头只显示了30个项目。当用户滚动到页面底部时，我使用 vue-observe-visibility 来加载更多内容。因此它“每页”或“视图”加载 30 个项目。
项目使用我在其中循环的项目组件。 示例
<div v-for="value in filteredRecords.slice( 0, 30)" :key="value.id">
<item-card
:product_id="value.id"
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')"
:product_price="value.product_price"
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale"
:heart="true" v-if="!mobile">
<item-card-for-mobile
:product_id="value.id"
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')"
:product_price="value.product_price"
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale"
:quickview="true"
v-else>
<div>
我测试了它，当用户滚动很多并且产品的增量达到 1250 个项目时，例如，在更改页面时（例如带有文本的空白页面，没有 api 调用）单个页面应用程序需要 4 到 6 秒才能更改。
有没有办法让它更有效率？
tips 提高列表的性能：
- 使用virtual scroller component
- 不要在 v-for 中使用 v-if，尤其是如果列表很大，请始终使用 v-show.
这种情况下，可以这样处理
<div v-for="value in filteredRecords.slice( 0, 30)" :key="value.id" v-if="!mobile">
<item-card
:product_id="value.id"
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')"
:product_price="value.product_price"
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale"
:heart="true">
<div>
<div v-for="value in filteredRecords.slice( 0, 30)" :key="value.id" v-else>
<item-card-for-mobile
:product_id="value.id"
:product_slug="value.product_slug"
:product_name="value.product_name"
:product_img="getImage(value.product_img , '300x300')"
:product_price="value.product_price"
:product_sale_price="value.product_sale_price"
:product_stock="value.product_stock"
:locale="locale"
:quickview="true"
>
<div>
(ps 这是一个小的代码重复但是它避免了检查 N 次 mobile prop)
- 有机会时使用 v-once directive