Vue の長いリストをすばやく読み込む方法

  <!--html コード-->
  <テンプレート>
    <div 
      :
      :style="{'min-height': (item.height>=0?item.height:height) + 'px'}"
      :key="アイテム[データキー]"
      :id="'scrollItem_' + アイテム[データキー]"
      v-for="(item,index) in dataList" 
      >
      <長い項目 
        v-if="showList[インデックス]"
        :dataKey="データキー" 
        :item="アイテム"
        :boxHeight="アイテムの高さ||0"
        :direction="方向"
        :heightChange="高さ変更"
        :extendCcomments="コメントを拡張"> 
      </long-item>
    </div>
  </テンプレート>

 <!--コンポーネントをマウント-->
  拡張コメント(アイテム){
    this.componentProps.item=アイテム
    var Profile = Vue.extend(this.dataComponent);
        // Profileインスタンスを作成し、要素にアタッチする new Profile({
          propsData: this.componentProps
        }
      ).$mount('.long-item-'+item[this.dataKey]);
  }

 <!--各ノードのサイズが変わります-->
  this.$nextTick(()=> {
    this.$DomListener.listenTo(document.getElementById('long-item-'+this.item[this.dataKey]), (要素)=>{
      if (this.boxHeight != element[this.directionConfig.width]) {
        this.heightChange(this.item, 要素[this.directionConfig.width])
      } 
    })
  });

  getShowLimit(開始トップ) {
    const scrollTop = startTop || this.scrollWrap[this.directionConfig.scrollTo] || 0; // スクロール距離 this.viewClientHeight = this.scrollWrap[this.directionConfig.width]; // 表示領域の高さ this.scrollTop = scrollTop
    this.showStart = scrollTop - this.viewClientHeight
    this.showEnd = scrollTop + 2*this.viewClientHeight
    if(this.setTopTimer){
      タイムアウトをクリアします(this.setTopTimer)
    } 
    this.setTopTimer = setTimeout(() => {
      this.setItemTopheight() 関数
    }, 300);
  },

  // 高さに基づいてノードが表示されるかどうかを計算する setItemTopheight(){
    stsartId = this.dataList[0]&&this.dataList[0][this.dataKey]とします。
    startDom = stsartId && document.getElementById('scrollItem_'+stsartId) とします。
    startTop = startDom とします。startDom[this.directionConfig.offset] : 0
    this.worker = this.$worker.run((dataList,showStart,showEnd, startTop,hideIds,dataKey,height) => {
      let topHeight = startTop; // タイトルの上端から上端までの距離 let bottomHeight = 0; // タイトルの下端から上端までの距離 let showList = []
      for(let i=0,len=dataList.length;i<len;i++){
        アイテム = dataList[i]とする
        if(hideIds.indexOf(item[dataKey]) != -1){
          showList[i] = false;
          続く;
        }
        下の高さ = 上の高さ + (item.height>=0?item.height:height)
        // 判断 1. 質問の上部が表示範囲内にある 2. 質問の下部が表示範囲内にある 3. 質問の上部も下部も表示範囲内にない if((topHeight>=showStart && topHeight<=showEnd)||
          (bottomHeight>=表示開始 && bottomHeight<=表示終了)||
          (topHeight<showStart && bottomHeight>showEnd) ){
          showList[i] = true}
         それ以外{
          showList[i] = 偽
        } 
        topHeight += ((item.height>=0?item.height:height));
      }
      showList を返す
    }, [this.dataList、this.showStart、this.showEnd、startTop、this.hideIds、this.dataKey、this.height])
    .then(res => {
      this.showList = res
    })
    this.worker = null
  },

npm をインストール vue-long-list-load --save

<長いリスト 
 ref="vueLongList"
 データキー='id' 
 スクロールラップ
 :dataList="データリスト" 
 :dataComponent="データコンポーネント" 
 :componentProps="コンポーネントプロパティ"
 高さ=100
 > 
</長いリスト>

  <--dataKey=id と仮定-->
  
  <--リスト内で非表示にするノード-->
  非表示ID:[1, 2]
  <--リストデータ dataList の高さは **Number** です。 -->
  データリスト:[
    {id:1,高さ:100},
    {id:2,高さ:200},
    {id:3,高さ:300},
    {id:4,高さ:300},
    {id:5,高さ:300}
  ]
  
  <--ノードの高さ-->
  高さ:100
  <--dataList に高さの値がある場合は、この高さを設定する必要はありません-->
  <--dataList も height も渡されない場合は、デフォルト値は 100 となり、スクロールに若干の遅延が生じる可能性があります。 -->
  <--それぞれの高さが異なる場合はdataListに渡し、同じ場合はheightに渡すことをお勧めします-->
  
  <--ノードの幅と高さが変更されると、コールバック メソッドは ID と高さをパラメーターとして返します -->
  サイズ変更(id, 高さ){ }