Vue.js隐藏当前视口之外的项目

Question

我正在Vue.js中制作一个电子商务类型菜单，其中的项目是包含大量功能和图像的div。 当渲染大约200个项目时，性能相当不错，但是当添加的项目数量过多时，该网站的运行就会开始缓慢。

如果Vue元素在当前可滚动视图之外（例如iOS中的ScrollViews），有条件地从DOM中隐藏或删除Vue元素的最佳方法是什么？ 在Vue.js中是否有任何插件或库可以帮助执行较长的数据项列表？

谢谢！

Answer 1

我已经使用我在评论中提到的软件包制作了一个演示代码段。

我制作了一个“信号”项来充当观察者。 当“信号”项离开视口时，“复杂材料”不再呈现。 我这样做是为了让您看到“复杂的东西”消失。 当“信号”滚动回视图时，将显示“复杂材料”。

您可以将观察者放在小部件的根元素上，并且只有在整个小部件都看不到时，事物才会被隐藏。 但是，您不想将v-if放在根元素上，否则一旦消失就永远不会回来。

 const containerMonitor = scrollMonitor.createContainer(document.body); new Vue({ el: '#app', data: { ids: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] }, components: { widget: { template: '#widget-template', props: ['id'], data() { return { visible: true }; }, mounted() { const elementWatcher = containerMonitor.create(this.$el.querySelector('.signal')); elementWatcher.enterViewport(() => { this.visible = true; }); elementWatcher.exitViewport(() => { this.visible = false; }); } } } }); 

 .widget-container { height: 200px; margin: 10px; background-color: #f0f0f0; display: flex; flex-flow: row wrap; } .signal { height: 10px; width: 10px; margin: 30px; background-color: red; border: thin solid blue; } .complex-stuff { flex-basis: 100%; padding: 15px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> <script src="https://rawgit.com/stutrek/scrollMonitor/master/scrollMonitor.js"></script> <template id="widget-template"> <div class="widget-container"> <div class="signal"> </div> <div v-if="visible" class="complex-stuff"> This is widget {{id}}. Blah blah blah. </div> </div> </template> <div id="app"> Widgets below: <widget v-for="id in ids" :id="id"></widget> :widgets above </div>