脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3组件数据懒加载

Vue3中的组件数据懒加载

 更新时间：2023年10月21日 17:07:57   作者：itpeilibo  
这篇文章主要介绍了Vue3中的组件数据懒加载问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

组件数据懒加载-基本使用

目标：通过useIntersectionObserver优化新鲜好物和人气推荐模块

电商类网站，尤其是首页，内容有好几屏，而如果一上来就加载所有屏的数据，并渲染所有屏的内容会导致首页加载很慢。

数据懒加载：等组件正式进入到可视区中时，才把组件内部的ajax请求发起，否则不请求数据

（1）优化新鲜好物

<script lang="ts" setup>
const { home } = useStore()
const target = ref(null)
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  console.log(isIntersecting)
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  if (isIntersecting) {
    home.getNewList()
    stop()
  }
})
</script>

<template>
  <div class="home-new">
    <HomePanel ref="target" title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
    </HomePanel>
  </div>
</template>

（2）优化人气推荐

<script lang="ts" setup>
const { home } = useStore()
const target = ref(null)
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  console.log(isIntersecting)
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  if (isIntersecting) {
    home.getHotList()
    stop()
  }
})
</script>
<template>
  <HomePanel ref="target" title="人气推荐" sub-title="人气爆款 不容错过">

  </HomePanel>
</template>

给ref添加组件类型

参考链接:https://staging-cn.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs

<!-- App.vue -->
<script setup lang="ts">
import MyModal from './MyModal.vue'

const modal = ref<InstanceType<typeof MyModal> | null>(null)

const openModal = () => {
  modal.value?.open()
}
</script>

组件数据懒加载-封装

目标：

封装组件数据懒加载可复用的逻辑

分析：

  • 首页中，很多地方都应该使用组件数据懒加载这个功能，不管是哪个模块使用，下面代码都会重复书写
  • 事实上，唯一可能会随着业务使用发生变化的是 ajax接口的调用
  • 其余的部分我们进行重复使用，抽离为可复用逻辑

核心代码

（1）封装通用的懒加载数据api src/utils/hooks.ts

// 自定义一些通用的compositions api
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

// 封装通用的数据懒加载api
export function useLazyData(apiFn: () => void) {
  // 通过 ref 获得组件实例
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
    target,
    // isIntersecting 是否进入可视区域，true是进入 false是移出
    // observerElement 被观察的dom
    ([{ isIntersecting }]) => {
      // 在此处可根据isIntersecting来判断，然后做业务
      if (isIntersecting) {
        stop()
        apiFn()
      }
    }
  )
  return target
}

（2）优化新鲜好物

<script lang="ts" setup>
const target = useLazyData(() => {
  home.getNewList()
})
</script>
<template>
  <div class="home-new">
    <HomePanel ref="target" title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
    </HomePanel>
  </div>
</template>

（3）优化人气推荐

<script lang="ts" setup>
const target = useLazyData(() => {
  home.getHotList()
})
</script>
<template>
  <HomePanel ref="target" title="人气推荐" sub-title="人气爆款 不容错过">
  </HomePanel>
</template>

拓展小知识：自定义lazyhook的类型优化

export function useLazyApi(apiFn: () => void) {
  const target = ref<MaybeElementRef | null>(null)
  const {stop} = useIntersectionObserver(target, ([{isIntersecting}]) => {
    if (isIntersecting) {
      stop()
      apiFn()
    }
  })
  return target
}

添加了ref类型提示：MaybeElementRef -> 暴露出去的taget如果赋值类型不对会进行提示

在这里插入图片描述

看一下MaybeElementRef到底是什么类型？

declare type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
declare type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
declare type MaybeRef<T> = T | Ref<T>;

心得：

MaybeElementRef类型的类型为：

  • MaybeElement的Ref类型
  • 或者直接为MayBeElement类型

首页主体-滚动加载商品的bug

  • 产品区域需要滚动比较多才能去加载数据。
  • threshold 容器和可视区交叉的占比（进入的面积/容器完整面积） 取值，0-1 之间，默认比0大，所以需要滚动较多才能触发进入可视区域事件。 阈值 (进入的面积/容器完整面积)
const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }], observerElement) => {
    if (isIntersecting) {
      stop()
      // 调用API获取数据
      apiFn().then(data => {
        result.value = data.result
      })
    }
  },
  {
    threshold: 0
  }
)
rElement) => {
    if (isIntersecting) {
      stop()
      // 调用API获取数据
      apiFn().then(data => {
        result.value = data.result
      })
    }
  },
  {
    threshold: 0
  }
)

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue轻松实现虚拟滚动的示例代码

    vue轻松实现虚拟滚动的示例代码

    移动端网页的日常开发中,偶尔会包含一些渲染长列表的场景，本文主要介绍了vue 虚拟滚动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • vue时间戳和时间的相互转换方式

    vue时间戳和时间的相互转换方式

    本文通过示例代码介绍了vue时间戳和时间的相互转换方式,通过场景分析介绍了vue3使用组合式api将时间戳格式转换成时间格式（2023年09月28日 10:00）,感兴趣的朋友一起看看吧
    2023-12-12
  • vue实现手机验证码登录

    vue实现手机验证码登录

    这篇文章主要为大家详细介绍了vue实现手机验证码登录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 一文详解如何在Vue3+Vite中使用JSX

    一文详解如何在Vue3+Vite中使用JSX

    vite是一个由vue作者尤雨溪专门为vue打造的开发利器,其目的是使 vue项目的开发更加简单和快速,下面这篇文章主要给大家介绍了关于如何在Vue3+Vite中使用JSX的相关资料,需要的朋友可以参考下
    2023-02-02
  • vuex页面刷新后数据丢失的方法

    vuex页面刷新后数据丢失的方法

    这篇文章主要介绍了vuex页面刷新后数据丢失的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue3全局配置Axios并解决跨域请求问题示例详解

    Vue3全局配置Axios并解决跨域请求问题示例详解

    axios 是一个基于promise的HTTP库,支持promise所有的API,本文给大家介绍Vue3全局配置Axios并解决跨域请求问题,内容从axios部署开始到解决跨域问题,感兴趣的朋友一起看看吧
    2023-11-11
  • vue3响应式Object代理对象的读取示例详解

    vue3响应式Object代理对象的读取示例详解

    这篇文章主要为大家介绍了vue3响应式Object代理对象的读取示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • vue data中如何获取使用store中的变量

    vue data中如何获取使用store中的变量

    这篇文章主要介绍了vue data中如何获取使用store中的变量，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03
  • vue3响应式对象的api超全实例详解

    vue3响应式对象的api超全实例详解

    可以把数据变成响应式api的方法叫做响应式api,下面这篇文章主要给大家介绍了关于vue3响应式对象api的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vue搭建本地JSON静态数据服务器全过程

    vue搭建本地JSON静态数据服务器全过程

    这篇文章主要介绍了vue搭建本地JSON静态数据服务器全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07

最新评论