一、列表渲染中，有时候列表数据量比较大，一次性渲染页面会卡顿。如我有个users对象数组，这个users是动态添加的，支持删除操作。

1、一次性加载的写法：

<div class="user-col scoll-col">
   <div class="user-item" v-for="(user, index) in users" :key="index">
      {{ user.userName + '(' + user.userAccount + ')' }}
      <a href="javascript:void(0);" @click="deleteAddUser(index)" class="delete- 
         icon">X</a>
    </div>
</div>


<style scoped lang="less">
  .user-col {
    .user-item {
      margin-left: 10px;
    }
    .delete-icon {
      float: right;
      margin-right: 20px;
    }
  }
  //限制高度滚动条
  .scoll-col {
    max-height: 300px;
    overflow-y: auto;
  }
</style>

一次性加载，拖动右侧自定义的滚动条，拖动到最底部则展示最后一条数据。而滚动加载，拖动到最下面会触发加载事件。

 2、换成滚动加载：

<div class="infinite-list-wrapper" style="overflow:auto">
   <template>
      <ul class="infinite-list" v-infinite-scroll="scrollLoadUser" style="overflow:auto;height:300px">
          <li v-for="i in scrollCount" class="infinite-list-item" :key="i" infinite-scroll- 
              disabled="disabled">
              <div v-if="users[i - 1]">
                {{ users[i - 1].userName + '(' + users[i - 1].userAccount + ')' }}
                 <a href="javascript:void(0);" @click="deleteAddUser(i - 1)" class="delete- 
                     icon">X</a>
            </div>
          </li>
       </ul>
       <p v-if="scrollUserLoading">加载中...</p>
       <!-- <p v-if="scrollUserNoMore && addUsers.length > 0">没有更多了</p> -->
    </template>
 </div>


<script>
data(){
  return{
    users:[],
    //滚动加载
    scrollCount: 0,
    scrollUserLoading: false
 }
},

 computed: {
    scrollUserNoMore() {
      return this.scrollCount >= this.addUsers.length;
    },
    disabled() {
      return this.scrollUserLoading || this.scrollUserNoMore;
    }
  },

 methods:{
    scrollLoadUser() {
      //一次加载20条
      let increaseCount = 20;
      let addAllCount = this.addUsers.length;
      if (this.scrollCount + increaseCount > addAllCount) {
        this.scrollCount = addAllCount;
      } else {
        this.scrollCount += increaseCount;
      }
      console.info('加载数据:' + this.scrollCount);
    },
 },

watch: {
    users: {
      handler: function(val) {
        if (val && val.length > 0) {
          this.scrollLoadUser();
        }
      }
    }
  }
</script>

初始化的时候会调用scrollLoadUser方法，滚动条滚动到最下方也会调用scrollLoadUser。由于users是动态添加的，在监听users变化的时候再调用一次scrollLoadUser。在scrollLoadUser方法中，则根据users的长度判断是否需要加载。