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

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>