vue长列表优化

自己留着用
因为引用类型作为参数传递的是地址，所以函数内改变数组，原数组也会被改变，利用这一特性加上vue的双向绑定实现定时新增数据

import Vue from 'vue'
//长列表优化方法
var lazyTimer = true
var timer = undefined
exports.install = function() {
	Vue.prototype.$lazyList = async (list, arr, num) => {
	    //原数据不要放在data中
		//num 不要太大，最好不要超过50根据设备性能修改
		//针对长列表优化，每隔一秒加载num条数据,num为步长每次刷新数据条数
		//list为展示数据 参数必须为对象， list,arr必须为数组
		//lazyTimer 判断定时器是否结束，如果没有结束则清空定时器重新开始 (防止数据未加载完成后搜索导致数据混乱)
		//arr为原始数据
		if (lazyTimer == false) {
			clearInterval(timer)
		}
		if (arr && arr.length && arr.length > num) {
			list.splice(0)
			let step = num
			list.push.apply(list, arr.slice(0, step)) //初始步数数据，防止定时时数据为空
			lazyTimer = false
			timer = setInterval(() => {
				if (arr.length - list.length < step) {
					step += (arr.length - list.length)
					list.push.apply(list, arr.slice(list.length, step))
					//拼接剩余数组长度
					clearInterval(timer)
				} else {
					step += num
					list.push.apply(list, arr.slice(list.length, step))
					//每次拼接步数长度的数组
				}
				if (arr.length == list.length) {
					lazyTimer = true
					clearInterval(timer)
				}
			}, 1000)
		} else {
			// 不符合步长的之间返回搜索数组
			list.push.apply(list, arr) 
		}

	}
}

使用方法再main.js中直接调用，因为我要用的页面比较多所以定义为全局了，也可以把js部分拿出来单独引用

import  lazyList from './public/js/base.js'
Vue.use(lazyList)

使用方法如下

         data() {
			return {
					list: []
			}
		},
        methods:{
	    initData(){
             list().then(res=>{
             this.$lazyList(this.list, res.rows , 20)
             })
			//this.list为优化后的数据
        }
		}