主题

vue组件懒加载的实现

by lufangzhou

目录

一、滚动加载数据的实现

二、组件的动态加载

三、数据的更新

question：

如何实现一个数据无限滚动？

-监听滚动事件

                    
                      // 开始观察滚动触发元素
                      const contentRef = ref()
                      const handleScroll = () => {
                        const container = contentRef.value
                        // 判断是否滚动到底部
                        if (
                            container.scrollTop + container.clientHeight >=
                            container.scrollHeight
                        ) {
                          loadMore()
                        }
                      }
					
                    
                        
                        

                            
{{ i }} -- {{ index }}

- intersectionObserver

1
2
作用
-异步观察某个元素是否在某个视口内
-元素是否相交
使用场景
- 懒加载
- 无限滚动
- 计算广告可见度，估算收入
3

实现思路

1、观察浏览器视口，用户可见部分 2、监视绿色区 3、触发加载函数
4
主要代码: 查看完整代码 
                        
                        
                            let observer = new IntersectionObserver(
                              (entries) => { // entries就是监听的dom
                                entries.forEach((entry) => {
                                  if (entry.intersectionRatio >= 0) {
                                    console.log('进入可视区域')
                                    loadMore()
                                  } else {
                                    console.log('不可见')
                                  }
                                })
                              },
                            )
                            // 打开监听
                            observer.observe(observerElement.value!)
5
性能对比:

滚动加载300条数据

| 无限滚动 | JS Heap | Documents| Listeners| | ---- | -------- |----|----| | `scroll监听 ` | `12.5MB ~ 13.6MB` |4-4|94| | `intersectionObserver` | `6.3MB ~ 7.4MB` |1-2|50|

        使用intersectionObserver监听 ， 我们可以看到内存只占用了scroll的50%, 这还是300条数据的情况下，这性能差距肯定是指数级拉开的，所以用哪个就不言而喻了。

6
快的原因:
异步执行
  • IntersectionObserver 是使用`浏览器的任务调度系统`异步处理的，这意味着观察者的回调函数不会直接阻塞主线程。
    从而减少对渲染性能的影响。
硬件加速
  • 使用浏览器底层的硬件加速技术来进行计算。scroll 事件则需要频繁地进行 DOM 查询、计算和重排操作，性能消耗较大。

question：

一个页面有100个组件如何处理？

组件的动态加载

1
2
component
动态导入组件, 经常配合 require.context / import.meta.glob使用。
defineAsyncComponent
异步导入组件， 在需要的时候加载。


组件的导入

同步
                    
                    import A form './A.vue'
                    import B form './B.vue'
                    import C form './C.vue'
                    ...
异步
                    
                      const loadComponent = (name: string) =>
                          defineAsyncComponent({
                            loader: () => import(`./${name}.vue`),
                          })

实现流程

查看代码

实现效果

组件数据的更新

1
基本模块结构
2
基本模块结构 x 10
3
刷新组件 - hooks 
                        
function useRefreshComponent() {
  const componentVisible = ref(true)

  const refresh = async () => {
    componentVisible.value = false
    await nextTick(() => {
      componentVisible.value = true
    })
  }
  return {
    refresh,
    componentVisible,
  }
}
export { useRefreshComponent }
4
实战效果
谢谢聆听~