Vue中使用Hook实现数据懒加载

最新推荐文章于 2025-12-15 07:24:15 发布

KwyxLibrary

最新推荐文章于 2025-12-15 07:24:15 发布

阅读量109

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/KwyxLibrary/article/details/133359010

前端专栏收录该内容

177 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了在Vue中使用Hook实现数据懒加载的方法，通过监听组件变化，在需要时加载数据，提升页面加载速度和用户体验。示例代码展示了如何用Vue的Hook函数动态加载并展示数据，同时提及了可根据实际需求扩展加载逻辑，如分页和滚动加载。

在Vue中，我们可以使用Hook来实现数据懒加载的功能。数据懒加载指的是在需要的时候才加载数据，而不是一次性将所有数据加载完毕。这种方式可以提高页面的加载速度和用户体验。本文将介绍如何使用Vue的Hook来实现数据懒加载，并提供相应的源代码。

首先，我们需要使用Vue的watchEffect Hook来监听组件的变化，并在需要的时候加载数据。下面是一个示例代码：

import {
   
    ref, watchEffect } from 'vue';

export default {
   
   
  setup(

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

KwyxLibrary

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

vue-hooks-可缓存的方法

09-06

基于vue计算属性实现的可以缓存的方法（可以传递参数的计算属性），应用场景：例如表格渲染大量数据，但是一列的数据是根据行计算出来的，改变是只需要针对那一行数据改变而改变，不用全部重新计算一遍

vue3自定义hook实现数据懒加载

weixin_45802907的博客

12-06

605

vue3 自定义hook实现数据懒加载

参与评论您还未登录，请先登录后发表或查看评论

Vue 自定义 Hook：简化本地存储管理

weixin_63929524的博客

12-01

348

在Web应用程序中，客户端本地存储是一种在浏览器中存储数据的机制，它允许我们将信息保存在用户的设备上。考虑到本地存储的重要性，我们将使用 Vue 3 的 Composition API 来创建一个灵活且易于使用的自定义 Hook，简化了在不同存储类型（通过本文，我们学习了如何使用 Vue 3 的 Composition API 创建一个强大的自定义 Hook，用于简化本地存储的管理。在现代Web开发中，客户端的本地存储是一个重要的工具，用于在浏览器中保存和检索用户数据。）中存储和检索数据的过程。

Vue3 学习笔记 —— Hooks、全局函数和变量、Vue3 插件

Lyrelion的博客

12-04

5684

Vue3 学习笔记 —— Hooks、全局函数和变量、Vue3 插件

vue3 hook组件数据懒加载

greed

09-15

442

vue3 hook组件数据懒加载 // const {stop} = useIntersectionObserver(target, fn, options) // 1、参数一target表示被监听的DOM元素 // 2、参数二是回调函数，用于通知监听的动作（回调函数的第一个形参isIntersecting表示被监听的元素已经进入了可视区） // 3、表示配置选项 // stop 是停止观察是否进入或移出可视区域的行为 const { stop } = useIntersectionObserver

vue3封装Hooks 实现图片懒加载

ssssss_233的博客

11-06

989

简单解释什么是图片懒加载。即图片在进入浏览器的可视区域时才进行加载，而不是在页面初始化时就全部加载所有图片。可以用一些简单的示意图或者类比的方式（比如把页面想象成一个画展，只有当观众走到画作前才会仔细去看这幅画，也就是才加载这幅画的细节，类似图片进入可视区才加载）来帮助读者更好地理解懒加载的概念。

vue 实现懒加载

When you can't win by being better, you can win by being different.

04-23

6979

懒加载，也称为延迟加载，是一种将资源（如图片、组件、代码等）推迟到需要的时候再加载的策略。在 Vue 中，懒加载通常涉及到组件和图片的加载。

做vue3项目中如何实现数据的懒加载

cmhahaha的博客

09-15

1177

写在前面目标：现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下我们做vue3时如何实现数据的懒加载 我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现。大致步骤：理解 useIntersectionObserver 的使用，各个参数的含义改造 home-new 组件成为数据懒加载，掌握 useIntersectionObserver 函数的用法

vue3中的组件数据懒加载useIntersectionObserver

haodanzj的博客

09-14

3011

官方文档首页主体-组件数据懒加载 目的：实现当组件进入可视区域在加载数据。我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现。大致步骤：理解 useIntersectionObserver 的使用，各个参数的含义改造 home-new 组件成为数据懒加载，掌握 useIntersectionObserver 函数的用法封装 useLazyData 函数，作为数.

vue3数据懒加载 无限滚动加载分页列表

qdm13209211861的博客

03-24

1438

vue3数据懒加载 列表滚动加载

使用 Vue 实现一个虚拟列表的方法

10-16

在开发Web应用时，尤其是...在Vue.js中，可以利用其响应式系统和组件化特性，轻松实现虚拟列表，同时保持代码的简洁性和可维护性。在实际项目中，应根据具体需求和数据特性选择合适的优化策略，以达到最佳性能效果。

Vue3 结合vueUse实现图片瀑布流布局以及响应式，懒加载

qq_41331633的博客

01-29

3272

基于vue3及vueUse实现的瀑布流布局实现了，但也有很多不足之处。一开始我是想通过render函数渲染，但是图片的请求是异步的，在render时一直报错（no parentNode）。后面使用原生dom的append操作。后面我将再试试render函数，以及将该抽离成hook函数以及实现图片的懒加载。

商城后台管理系统 02 添加规格参数-动态表单

weixin_52943021的博客

12-15

168

Boolean。

Vue 组件解耦实践：用回调函数模式替代枚举类型传递

鹏北海的博客

12-12

418

本文通过一个登录模块重构案例，介绍了使用回调函数模式解耦Vue组件的方法。原有实现中父组件依赖子组件的枚举类型来判断操作来源，导致代码耦合度高、扩展性差。重构后子组件将后续操作封装为回调函数保存，父组件只需在协议确认后通知子组件执行回调，无需了解具体操作细节。这种模式降低了组件耦合度，提高了代码可维护性和扩展性，适用于异步确认流程、多入口单出口等场景。文章还对比了两种方案的优劣，并强调了组件职责单一的重要性。

高德API精讲系列——vue+高德API搭建前端Echarts图表页面

weixin_66547608的博客

12-10

125

本文介绍了在Vue项目中使用Echarts 5.x开发地理地形图的核心要点：1. 必须准备省市县级别的geo-json文件（推荐从阿里DataV获取）2. 区分注册地图、散点坐标和主题的API使用方式3. 提供了Vue3最小实现示例和常见问题解决方案4. 包含下钻功能实现思路和批量注册脚本5. 强调map名称一致性、文件分离原则和打包注意事项6. 展示了信阳市人口密度图的完整实现代码和效果展示。

avue uploader图片预览拉伸变型的css处理方法

经验之谈，不做搬运工

12-10

300

摘要：针对avue uploader图片预览拉伸问题，可通过CSS覆盖解决。使用object-fit: cover属性可让图片覆盖容器并裁剪多余部分，保持比例不变。如需完整显示不裁剪，可改用object-fit: contain。示例代码展示了如何在el-upload组件中应用该样式。

reown/appkit/vue钱包登录

周18的碎碎念

12-09

102

公共头部显示钱包登录按钮。

商城后台管理系统 03 规格参数配置

最新发布

weixin_52943021的博客

12-15

127

【代码】商城后台管理系统 03 规格参数配置。

高德API精讲系列——vue+高德API搭建前端3D交通页面

weixin_66547608的博客

12-10

110

本文介绍了一个基于Vue3和高德地图JS API的3D热力/路况一体化组件实现方案。主要内容包括：精简版和详细注释版代码实现，包含地图初始化、3D视图设置、路况图层和热力图的切换控制功能关键优化点：解决宽度问题、热力图透明度设置、内存泄漏处理等安全建议：API密钥管理和域名白名单配置性能优化：大数据量热力图的网格聚合方案扩展方向：时间轴动画、图层叠加、自定义渐变等高级功能该组件可直接集成到项目中，通过按钮切换路况和热力图显示，适合交通监控、人口密度分析等场景应用。

vue3封装hooks实现图片懒加载源码

03-08

### 封装 Vue3 Hooks 实现图片懒加载 在现代前端开发中，优化页面性能是一个重要的话题。对于大型网站来说，图片资源往往是影响首屏渲染速度的关键因素之一。为了提高用户体验并减少不必要的网络请求，可以采用图片懒加载技术。 #### 创建 `useLazyImage` Hook 函数通过创建一个名为 `useLazyImage` 的 hook 来处理图像的懒加载逻辑： ```javascript import { ref, onMounted } from 'vue'; export function useLazyImage(src) { const imageRef = ref(null); let observer; const loadImage = () => { if (imageRef.value && !observer) { observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.src = src; observer.unobserve(entry.target); // 只触发一次 } }); }, {}); observer.observe(imageRef.value); } }; onMounted(() => { loadImage(); }); return { imageRef, }; } ``` 此代码片段展示了如何利用 JavaScript 原生 API —— `IntersectionObserver` 和 Vue Composition API 中的生命周期钩子来构建懒加载机制[^1]。 #### 使用 `useLazyImage` 组件内接下来展示如何在一个组件内部调用上述定义好的 hook 并将其应用于实际场景当中: ```html <template> <img :src="placeholderSrc" v-bind="$attrs" alt="" class="lazy-image" ref="imageRef"/> </template> <script setup> import placeholderSrc from '@/assets/placeholder.png'; import { useLazyImage } from './composables/useLazyImage'; const props = defineProps({ imgSrc: String, }); // 调用自定义Hook函数 useLazyImage(props.imgSrc); </script> <style scoped> .lazy-image { width: 100%; height: auto; } </style> ``` 这里假设有一个默认占位符图 (`placeholderSrc`) 显示给用户直到目标图片进入视口范围为止；当检测到该元素可见时，则替换其真实路径完成加载过程。 #### 完整示例说明以上两部分共同构成了完整的基于 Vue3 hooks 技术栈下的图片懒加载解决方案。首先我们编写了一个通用型 hook 方法用于监听 DOM 元素是否出现在屏幕可视区域内，并据此决定何时发起真正的 HTTP 请求获取远程数据。接着我们将这个工具方法集成到了具体的业务组件之中实现了预期效果——即只有当用户滚动至特定位置才会开始下载对应的大尺寸原图文件[^2]。