Vue 虚拟列表的实战示例

序言现如今，我们总是在无止境的刷。刷微博、刷抖音、刷沸点......一次次丝滑下拉体验的背后却是前端攻城狮的用心。本篇讨论基于 Vue.js 的列表无限下拉实践。我们的目标就是：让列表下拉纵享丝滑，而不是像以往的下拉就 loading 等待的体验。当 DOM 元素超过 1500 至 2000 个的时候，页面就开始又延迟，尤其是在小型的、性能差的设备上尤为明显。列表分为可见区域和缓冲区域，超出这个范围的列表 DOM 都将被删除。// EndlessList.vue显而易见，当 searchQuery 变化的时候，我们会得到新的搜索结果。当然不在视图区和缓冲区的 DOM 都将被删除，这也是页面不形成大量 DOM 元素的精髓。