vue3数据懒加载

已于 2023-03-09 15:24:11 修改
阅读量573 收藏
点赞数
分类专栏： 【vue3项目】b2c电商-pc端 vue知识点 文章标签： vue.js 前端 javascript Powered by 金山文档
于 2023-03-09 13:53:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51290060/article/details/129421167
版权
本文介绍了如何在Vue3中实现数据懒加载，利用@vueuse/core库的useIntersectionObserver来监听组件进入可视区域，从而在需要时才加载数据。通过理解该观察者API的用法，封装useLazyData公用函数，并在index.vue页面改造数据加载方式，可以优化前端性能，提高用户体验。
摘要由CSDN通过智能技术生成

目标：实现当组件进入可视区域在加载数据。

  • 使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现。

  • 对某个板块进行数据懒加载，首先要获取到这个dom元素，然后用useIntersectionObserver来监听这个dom，一旦可视区进入了这个dom元素这里，就可以进行请求数据接口

  • 安装@vueuse/core包,它封装了一些常见的交互逻辑




                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  lisa带你捕蟑螂
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue实现图片懒加载的方法分析

				
			

			

				

					11-21
				

			

		

		

			
				
本文将深入探讨如何在Vue项目中实现图片懒加载，并详细解析其工作原理和配置选项。  一、什么是图片懒加载？  图片懒加载是一种优化网页性能的技术，它延迟加载非视口内的图片，直到用户滚动到图片所在的位置。这样...

			
		

	



                

              
                



	

		

			

				
					
vue3实现组件数据懒加载

				
			

			

				

					weixin_53500514的博客
				

				

					12-12
					
					2780
					
				

			

		

		

			
				
组件数据懒加载指的是当组件进入可视区域后在加载数据，可以使页面数据加载更快和节约资源。

			
		

	



                


  
              

                


	

		

			

				
					
vue3实现懒加载

				
			

			

				

					IU
				

				

					09-27
					
					1006
					
				

			

		

		

			
				
做项目碰到了需要同时加载四十多个图标的需求，如果不管，会导致页面加载时图标区域长时间的空白，为了解决这种问题，我尝试使用懒加载解决。

			
		

	





	

		

			

				
					
vue3 - 详细实现商品列表无限下拉滚动懒加载数据，PC网站商城电商项目列表内鼠标下滑无限下拉加载功能，仿淘宝京东商品展示下滑加载更多数据，支持嵌套在div容器里进行滚动懒加载（示例代码，直接复制用

					
最新发布

				
			

			

				

					高级前端工程师
				

				

					08-01
					
					3529
					
				

			

		

		

			
				
vue3，nuxt3，商城系统，PC电脑端，网页，商城网站，商品列表，懒加载，无限滚动列表，淘宝京东商城，首页推荐列表，商品推荐无限列表，实现容器内无限下拉滚动懒加载数据，vue下拉滚动无限加载数据功能，支持移动端手滑、pc电脑端滚动条和鼠标拖动，数据列表在一个div元素内进行滚动懒加载，用户鼠标下滑时进行翻页，监听页面触底开启自动懒加载判断和请求合并数据，分页加载，无限下拉滚动加载，懒加载，vue数据懒加载，vue3实现无限滚动加载数据，vue实现下拉滚动无限加载数据，Vue实现列表虚拟滚动，实现无限滚动

			
		

	



		

			
		



	

		

			

				
					
Vue3实现图片懒加载及自定义懒加载指令

				
			

			

				

					~~~
				

				

					08-12
					
					9356
					
				

			

		

		

			
				
图片懒加载是一种常见性能优化的方式，它只去加载可视区域图片，而不是在网页加载完毕后就立即加载所有图片，能减少很多不必要的请求，极大的提升用户体验。图片懒加载的实现原理：在图片没进入可视区域的时候，只需要让 img 标签的 src 属性指向一张默认图片，在它进入可视区后，再替换它的 src 指向真实图片地址即可。本文就分享一下在vue3中实现图片懒加载的几种方式，包括使用插件以及自定义v-lazy指令。

			
		

	





	

		

			

				
					
Vue3中如何进行懒加载和按需加载？

				
			

			

				

					有我更精彩的博客
				

				

					04-28
					
					1442
					
				

			

		

		

			
				
随着前端技术的不断更新和发展，前端框架也在不断地升级优化，Vue3 作为一个全新的版本，带来了许多新的特性和功能。其中，懒加载和按需加载是前端开发中非常重要的概念，能够显著提升页面性能和用户体验。那么在 Vue3 中，如何实现懒加载和按需加载呢？接下来让我们一起来深入探讨。

			
		

	





	

		

			

				
					
如何在Vue3中实现代码分割和懒加载？

				
			

			

				

					有我更精彩的博客
				

				

					06-03
					
					1204
					
				

			

		

		

			
				
代码分割是指将应用的代码根据不同的功能模块进行分拆，生成多个小的代码块，在需要的时候加载相应的代码块，以替代一次加载所有代码，从而减少初始加载时间。懒加载是一种按需加载的技术，只有在用户真正需要某些内容时才加载对应的资源。这在单页面应用（SPA）中非常有用，可以显著提升应用的响应速度和性能。下面将详细介绍如何在Vue3中实现这两项技术，并给出实际的示例代码。

			
		

	





	

		

			

				
					
vue elementUI table表格数据 滚动懒加载的实现方法

				
			

			

				

					10-17
				

			

		

		

			
				
总的来说，Vue 和 ElementUI 结合实现滚动懒加载，既能够保证大量数据的流畅显示，又能够提升用户体验。关键在于合理利用数据绑定、事件监听和组件特性，同时结合前端与后端的分页逻辑，确保数据加载的平滑与高效。...

			
		

	





	

		

			

				
					
vue2笔记 — vue-router路由懒加载的实现

				
			

			

				

					12-09
				

			

		

		

			
				
懒加载允许我们在用户实际需要时才加载数据或资源，而不是一次性加载所有内容，从而减少了初始加载时间，提升了用户体验。在Vue.js开发的单页面应用（SPA）中，Vue Router 提供了路由懒加载的功能，以解决由于大型...

			
		

	





	

		

			

				
					
实现一个Vue自定义指令懒加载的方法示例

				
			

			

				

					11-20
				

			

		

		

			
				
在这个示例中，我们将讨论如何利用Vue自定义指令实现图片的懒加载功能，这是一种优化网页性能的技术，尤其适用于有大量图片的场景。  图片懒加载的基本思想是推迟非可视区域内的图片加载，直到它们进入用户的视野。...

			
		

	





	

		

			

				
					
Vue3优化之实现懒加载和子组件异步加载

				
			

			

				

					stu_kk的博客
				

				

					12-09
					
					1453
					
				

			

		

		

			
				
vue优化笔记

			
		

	





	

		

			

				
					
vue3(vite)实现图片懒加载

				
			

			

				

					m0_57108418的博客
				

				

					04-28
					
					1861
					
				

			

		

		

			
				
在src目录下创建lazy文件夹，用于存放懒加载实现的自定义指令，lazy下创建index.js文件。原理：在图片将要展示到可视区域时，将v-lazys的内容交给src属性，使图片得到展示。当不断下滑时，就会有图片进入可视区域，图片就会被放在src标签中进行渲染。在main.js中引入懒加载文件，挂载到app上。在app.vue中放多个图片，查看懒加载是否实现。banding是当前dom对象。

			
		

	





	

		

			

				
					
Vue 3中如何处理懒加载？

				
			

			

				

					weixin_71893790的博客
				

				

					12-30
					
					685
					
				

			

		

		

			
				
Vue 3中如何处理懒加载？

			
		

	





	

		

			

				
					
vue3.0实现数据懒加载

				
			

			

				

					^_^
				

				

					07-19
					
					3211
					
				

			

		

		

			
				
技术手段 Vue官方工具库(仅限vue3.0使用)中的useIntersectionObserver

核心API ：Intersection Observer（H5新增，不支持ie）

在没有这方法前使用Element.getBoundingClientRect()

1.为什么使用数据懒加载？



以上面图参考，如果不使用数据懒加载，当用户还没滑到不可见区域时，数据已经请求回来了，如果一个完整的项目，数据是非常多的，请求了很多没有必要的数据，我们想要的效果是 页面滑到哪里，就应该请求相对于...

			
		

	





	

		

			

				
					
【Vue3】组件数据懒加载

				
			

			

				

					一个前端开发者
				

				

					02-20
					
					2514
					
				

			

		

		

			
				
电商类网站，尤其是首页，内容有好几屏，而如果一上来就加载所有屏的数据，并渲染所有屏的内容会导致首页加载很慢。添加了ref类型提示：MaybeElementRef -> 暴露出去的taget如果赋值类型不对会进行提示。首页中，很多地方都应该使用组件数据懒加载这个功能，不管是哪个模块使用，下面代码都会重复书写。数据懒加载：等组件正式进入到可视区中时，才把组件内部的ajax请求发起，否则不请求数据。目标：封装组件数据懒加载可复用的逻辑。（1）封装通用的懒加载数据api。给ref添加组件类型。

			
		

	





	

		

			

				
					
vue3懒加载

				
			

			

				

					weixin_46002223的博客
				

				

					05-30
					
					224
					
				

			

		

		

			
				
【代码】vue3懒加载。

			
		

	





	

		

			

				
					
vue3 封装组件 ——懒加载

				
			

			

				

					weixin_62219002的博客
				

				

					05-22
					
					435
					
				

			

		

		

			
				
功能是通过IntersectionObserver来实现的。

			
		

	





	

		

			

				
					
【vue】路由懒加载

				
			

			

				

					qq_20470063的博客
				

				

					05-23
					
					1538
					
				

			

		

		

			
				
vue路由懒加载指打包部署的时候按照对应的页面进行划分，需要的时候加载对应的页面资源，不是一次性加载所有的资源。三种按需加载的方式。

			
		

	





	

		

			

				
					
vue3数据懒加载 列表滚动加载 可能是全网最容易理解的

				
			

			

				

					wnk1997的博客
				

				

					02-09
					
					1482
					
				

			

		

		

			
				
当滚动条下拉，浏览器显示target这个div的时候，触发函数，然后改变isLazy的值，我们同时也在监听isLazy属性，当监听到变化的时候，就比如滚动条拉到最下面了，需要加载新的数据的时候，触发我们的 “更新数据函数”，然后重新调用接口获取新的list数据。下面讲解一下，如果浏览器没有加载到ref=target的div，不会触发ts文件里面的useIntersectionObserver函数。需求是这样的，分页加载改成滚动到最后再加载，因为组件是自己写的，翻了下组件库，没有这个功能，就自己写一个。

			
		

	





	

		

			

				
					
vue2 component懒加载数据

				
			

			

				

					09-18
				

			

		

		

			
				
Vue2组件的懒加载数据可以通过使用Vue的异步组件功能来实现。异步组件允许在组件需要被渲染时才进行加载。你可以使用`Vue.component`方法注册异步组件，并且可以使用`import`语句来动态加载组件。  下面是一个示例...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值