当前位置：首页 > VUE

vue 实现懒加载

2026-03-10 02:35:42VUE

Vue 实现懒加载的方法

使用 Vue 的异步组件

Vue 允许将组件定义为异步加载的工厂函数，通过动态导入语法实现懒加载。

const AsyncComponent = () => import('./AsyncComponent.vue')

在路由配置中使用异步组件：

const router = new VueRouter({
  routes: [
    { path: '/async', component: () => import('./AsyncComponent.vue') }
  ]
})

使用 Vue Router 的懒加载

Vue Router 支持路由级别的懒加载，通过动态导入语法分割代码块。

vue 实现懒加载

const router = new VueRouter({
  routes: [
    { path: '/home', component: () => import('./views/Home.vue') },
    { path: '/about', component: () => import('./views/About.vue') }
  ]
})

使用 v-lazy 指令实现图片懒加载

安装 vue-lazyload 插件：

npm install vue-lazyload

在 main.js 中配置：

vue 实现懒加载

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'error.png',
  loading: 'loading.gif',
  attempt: 1
})

在模板中使用：

<img v-lazy="imageUrl" alt="lazy image">

使用 Intersection Observer API

自定义指令实现懒加载：

Vue.directive('lazy', {
  inserted: (el, binding) => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          el.src = binding.value
          observer.unobserve(el)
        }
      })
    })
    observer.observe(el)
  }
})

使用方式：

<img v-lazy="imageUrl" alt="lazy image">

第三方库推荐

vue-lazyload：轻量级的图片懒加载插件
@vueuse/core：提供 useIntersectionObserver 等组合式 API
vue-lazy-hydration：针对 SSR 的组件级懒加载方案

每种方法适用于不同场景，异步组件适合路由和组件分割，图片懒加载优化媒体资源加载，Intersection Observer 提供更灵活的懒加载控制。

标签: 加载 vue

分享给朋友：

vue 实现pdf

在Vue中实现PDF功能在Vue项目中实现PDF功能通常涉及PDF生成、预览或下载。以下是几种常见实现方式：使用vue-pdf库预览PDF 安装依赖： npm install vue-pdf…

vue实现删除

Vue 实现删除功能的方法在 Vue 中实现删除功能通常涉及以下几个步骤：数据绑定与列表渲染使用 v-for 指令渲染列表数据，并为每个项绑定唯一标识符（如 id）。例如： <ul&g…

vue实现图片

Vue 实现图片功能的方法静态图片引入在 Vue 项目中，可以通过 src 属性直接引入静态图片。图片通常放在 public 或 assets 目录下。 <template> &…

vue实现波形

实现波形效果的方法在Vue中实现波形效果可以通过多种方式完成，常见的方法包括使用Canvas绘制、CSS动画或第三方库。以下是几种实现方案：使用Canvas绘制波形通过Canvas API动态…

vue diff实现

Vue Diff 算法实现原理 Vue 的虚拟 DOM Diff 算法（即 patch 过程）是其高效渲染的核心，主要通过对比新旧虚拟节点的差异，最小化 DOM 操作。以下是关键实现要点：同层级比…

vue实现mui

使用 Vue 实现 MUI（Material-UI）风格的界面 Vue 本身不直接提供 MUI（Material Design）组件，但可以通过集成第三方库或手动实现来达到类似效果。以下是几种常见方法…

vue 实现懒加载