当前位置：首页 > 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实现博客

Vue 实现博客的基本步骤使用 Vue.js 实现一个博客系统可以分为前端和后端两部分。以下是基于 Vue 的前端实现方案，后端可以选择 Node.js、Django 或其他框架。项目初始化使…

vue实现radio

Vue 实现 Radio 按钮在 Vue 中实现 Radio 按钮可以通过 v-model 进行数据绑定，结合 input 元素的 type="radio" 属性。以下是一个基本示例： <t…

vue实现单选

实现 Vue 单选功能在 Vue 中实现单选功能可以通过多种方式完成，以下是几种常见的方法：使用 v-model 绑定单选按钮通过 v-model 可以轻松实现单选功能，将单选按钮的值绑定到同…

vue实现datalist

使用 Vue 实现 HTML5 的 datalist 功能 HTML5 的 <datalist> 元素提供了一种自动完成输入框的功能，允许用户在输入时从预定义的选项列表中选择。以下是几种在…

vue路由实现滑动

实现 Vue 路由滑动效果的方法使用 Vue Router 结合 CSS 过渡动画在 Vue Router 的路由视图组件 <router-view> 上添加过渡效果，结合 CSS 实…

vue实现点击跳转

Vue 实现点击跳转的方法在 Vue 中实现点击跳转可以通过以下几种方式：使用 router-link router-link 是 Vue Router 提供的组件，用于声明式导航。适合在模板中…

vue 实现懒加载