vue自定义指令懒加载,vue路由懒加载和按需加载的区别

vue实现懒加载懒加载好用的地方在于进入页面时不会全部渲染元素,这样大大的提高了渲染速度，实现原理很好理解。首先我们需要定义一个用于实现懒加载的盒子需要定义一个用于加载的函数添加一个监听滚动事件并对事件作出相应的判断 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> </style></head><body> <div id="app"> <div style="height: 100px;background: #f00;">高100》》》测试用</div> <div ref="box"> <div v-for="(item, index) in arr" :key="index" style="height: 50px;">{{ item }}</div> </div> <div style="height: 100px;background: #f00;">高100》》》测试用</div> </div></body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> new Vue({ el: "#app", data: { arrs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22], arr: [] }, created() { this.addArr()//初始化先调用一次 }, mounted() {//实时监听滚动条的变化 window.addEventListener('scroll', this.getScroll) }, destroyed() {//注意：监听的函数要在关闭页面时销毁掉,不然会影响到其它页面 window.removeEventListener('scroll', this.getScroll) }, methods: { getScroll(e) { //懒加载盒子高度+懒加载盒子距离顶部位置=计算出盒子底部的距离 const box_bottom = this.$refs.box.offsetHeight + this.$refs.box.offsetTop // 可视区域+滚动条距离顶部位置 = 浏览器窗口底部的位置 const count = e.currentTarget.scrollY + document.documentElement.clientHeight if (count >= box_bottom) { //懒加载条件限制判断 if (this.arr.length < this.arrs.length) {//做一次判断 this.addArr()//达到条件后执行这个函数 console.log('达到加载条件，执行加载'); } } }, addArr() { const count = this.arr.length//执行函数时获取新数组长度 if (count >= 20) {//限制最多加载20条数据 } else { this.arrs.map((item, index) => { if (this.arr.length < 5 + count) {//每次执行加载5条 if (this.arr.length < this.arrs.length) { this.arr.push(this.arrs[this.arr.length])//注意push原数组下标为当前新数组长度 } } }) } } }, })</script></html> 两个100高的盒子是测试用—无意义实现原理是原数组导入新数组方法ctrl c + ctrl v 就能用不懂看注释如果对你有用点个赞谢谢！