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>

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

1 个答案: