当前位置：首页 > VUE

vue实现懒加载

2026-02-20 00:53:07VUE

vue实现懒加载的方法

懒加载（Lazy Loading）是一种优化技术，延迟加载非关键资源，提升页面初始加载速度。Vue中可以通过以下方式实现懒加载。

路由懒加载

使用动态导入语法import()实现路由组件懒加载，Webpack会自动将动态导入的模块拆分为单独的文件。

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

组件懒加载

通过defineAsyncComponent定义异步组件，结合动态导入实现懒加载。

import { defineAsyncComponent } from 'vue'

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

图片懒加载

使用Intersection Observer API或第三方库如vue-lazyload实现图片懒加载。

安装vue-lazyload：

npm install vue-lazyload

配置和使用：

import VueLazyload from 'vue-lazyload'

const app = createApp(App)
app.use(VueLazyload, {
  preLoad: 1.3,
  loading: 'loading-image.png',
  error: 'error-image.png',
  attempt: 1
})

模板中使用v-lazy指令：

<img v-lazy="imageUrl" />

懒加载指令

自定义指令实现元素进入视口时加载内容。

const lazyLoadDirective = {
  mounted(el, binding) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          binding.value()
          observer.unobserve(el)
        }
      })
    })
    observer.observe(el)
  }
}

app.directive('lazy', lazyLoadDirective)

使用自定义指令：

vue实现懒加载

<div v-lazy="loadData">加载数据...</div>

懒加载库推荐

@vueuse/core：提供useIntersectionObserver等组合式API
vue-lazy-hydration：针对SSR的组件懒加载方案
lozad.js：轻量级Intersection Observer库

这些方法可根据具体场景选择，路由和组件懒加载适合代码分割，图片懒加载优化媒体资源加载性能。

标签: 加载 vue

分享给朋友：

vue 实现

Vue 实现的基本步骤安装 Vue.js 可以通过 npm 或 CDN 引入。使用 npm 安装适合大型项目，CDN 适合快速原型开发。 npm install vue 在 HTML 文件中引入…

vue实现报表

vue实现报表的方法使用Vue实现报表通常需要结合图表库或表格组件。以下是几种常见方法：使用ECharts 安装ECharts库： npm install echarts vue-echart…

vue实现input

Vue 实现 Input 输入框的方法基本双向绑定使用 v-model 指令实现双向数据绑定，适用于大多数表单场景： <template> <input v-model="…

vue实现画图

Vue 实现画图功能在 Vue 中实现画图功能通常需要结合 HTML5 的 <canvas> 元素或第三方库。以下是几种常见的方法：使用原生 Canvas API 通过 Vue 直接…

vue实现骰子

Vue 实现骰子功能创建 Vue 组件在 Vue 项目中创建一个骰子组件，例如 Dice.vue。该组件包含骰子的外观和逻辑。 <template> <div class=…

vue实现tap

Vue 实现 Tap 事件在移动端开发中，Tap 事件比 Click 事件更常用，因为 Click 事件有 300ms 延迟。以下是几种在 Vue 中实现 Tap 事件的方法。使用第三方库安装…

vue实现懒加载