vue实现懒加载的方法
Vue 实现懒加载的方法
路由懒加载
使用动态 import() 语法实现路由懒加载，适用于 Vue Router。代码示例：
const routes = [
{
path: '/home',
component: () => import('./views/Home.vue')
}
]Webpack 会将每个路由组件打包成单独的文件，按需加载。
组件懒加载
通过 defineAsyncComponent 实现组件懒加载，适用于 Vue 3：
import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent(() =>
import('./components/MyComponent.vue')
)Vue 2 中可使用以下方式：
const AsyncComponent = () => ({
component: import('./MyComponent.vue'),
loading: LoadingComponent,
error: ErrorComponent,
delay: 200,
timeout: 3000
})图片懒加载
使用 v-lazy 指令或 Intersection Observer API 实现图片懒加载。安装 vue-lazyload 插件：
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'error.png',
loading: 'loading.gif',
attempt: 1
})模板中使用方式：
<img v-lazy="imageUrl">懒加载指令
自定义懒加载指令，结合 Intersection Observer：
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)
}
})懒加载库推荐
vue-lazyload：专为 Vue 设计的懒加载库lozad.js：轻量级 Intersection Observer 实现lazysizes：功能全面的懒加载解决方案
性能优化建议
设置合适的预加载区域和延迟时间，避免过度加载。对于大量数据列表，可结合虚拟滚动技术进一步提升性能。
