09_列表渲染

飞翔的佩奇 2025-08-19 15:30:54

课时名称课时知识点
09_列表渲染使用v-for指令遍历数组/对象，结合:key属性优化列表渲染性能，解决常见渲染问题（如索引作为key的隐患）。
...全文
60 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
Vue2基础 09：列表渲染
本文详细介绍了Vue中列表渲染的关键字使用、数据过滤（包括模糊搜索）、以及列表排序的方法，通过实例展示了如何利用`key`、监听属性和计算属性优化性能，并讨论了选择合适的key策略。
09 Vue中的列表渲染 列表使用汇总
本文详细介绍了Vue中如何进行列表渲染，包括使用`v-for`指令和`key`属性，强调了`key`值唯一性对性能的影响。同时，展示了在控制台动态增加数据时，如何通过改变列表引用来触发页面更新。最后，讨论了对象循环的方法，并提到了`vue.set`用于更新对象属性和数组的方法，确保数据变化时页面同步更新。
09-使用JavaScript处理长列表数据：惰性渲染、虚拟滚动与分批渲染
本文介绍使用JavaScript优化长列表数据的渲染方法，包括惰性加载、虚拟滚动及分批渲染技术，有效提升页面性能。
Ai小程序入门09-列表与循环（小白入门：商品列表怎么做？一招教你搞定数据循环渲染）
不管你是做商城、新闻客户端、还是待办事项，打开任何一款现代 App，你看到的绝大多数界面都是一个长长的“列表”。如果从接口获取了 50 篇新闻，难道我们要在这个页面上手写 50 个一模一样的卡片代码吗？当然不用！本文将教你小程序中最核心的渲染魔法——列表循环（`wx:for`）。通过 Cursor 辅助，我们将学会如何定义一个卡片模板，并让 AI 帮我们用它批量“印刷”成百上千条数据！
长列表渲染-懒加载-虚拟列表
博客模拟10万条数据，对比了前端大数据的渲染方案。一次性渲染LCP为1.68s；分页可减少一次性渲染量；懒加载LCP为0.09s，但滚动到底部页面存在大量dom节点；虚拟列表LCP为0.11s，只渲染可见区域元素，解决了懒加载的问题。
李世保的课程社区_NO_1

1

社区成员

498

社区内容

发帖
与我相关
我的任务
社区描述
it 男
社区管理员
  • 飞翔的佩奇
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章