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

Question

我正在Vue.js中创建一个电子商务类型菜单,其中的项目包含相当多的功能和图像.渲染大约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>