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

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

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

---

谢谢

我用我在评论中提到的软件包制作了一个演示片段

我做了一个“信号”项目，作为观察者。当“信号”项离开视口时，“复杂内容”不再渲染。我这样做是为了让你看到“复杂的东西”消失。当“信号”卷回视图时，“复杂的东西”被渲染

你可以把观察者放在小部件的根元素上，只有当整个小部件都看不见的时候，事情才会被隐藏。但是，您不希望将

v-if

放在根元素上，否则一旦它消失，它将永远不会回来

const containerMonitor=scrollMonitor.createContainer（document.body）；
新Vue({
el:“#应用程序”，
数据：{
ID:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
},
组成部分：{
小部件：{
模板：“#小部件模板”，
道具：['id']，
数据（）{
返回{
可见：正确
};
},
安装的（）{
const elementWatcher=containerMonitor.create（此.el.querySelector（'.signal'）；
elementWatcher.enterViewport（（）=>{
可见=真实；
});
elementWatcher.exitViewport（（）=>{
可见=假；
});
}
}
}
});
.widget容器{
高度：200px；
利润率：10px；
背景色：#f0；
显示器：flex；
柔性流：行换行；
}
.信号{
高度：10px；
宽度：10px；
利润率：30像素；
背景色：红色；
边框：淡蓝色；
}
.复杂的东西{
弹性基准：100%；
填充：15px；
}

这是小部件{{id}。
废话废话。
小部件如下：
：上面的小部件
可能会有所帮助。不过，我没有一个完整的答案给你。谢谢你@Roy J！我仍然要尝试在我的项目中实现这一点，但从您的代码演示来看，它似乎正是我想要实现的