vue3 js懒加载

Vue3中可以使用异步组件实现懒加载，具体步骤如下：

1. 安装@vue/cli-service-global依赖：npm install -g @vue/cli-service-global
2. 在组件中使用import()语法引入需要懒加载的组件，例如：const Foo = () => import('./Foo.vue')
3. 在路由配置中使用component属性指定需要懒加载的组件，例如：{ path: '/foo', component: Foo }

相关问题

vue3 图片懒加载

以下是使用Vue3实现图片懒加载的方法：

1.安装vue3-lazyload插件

npm install vue3-lazyload --save

2.在main.js中引入并使用插件

import { createApp } from 'vue'
import App from './App.vue'
import VueLazyload from 'vue3-lazyload'

const app = createApp(App)

app.use(VueLazyload, {
  loading: '加载中...', // 图片加载过程中显示的文本
  error: '加载失败', // 图片加载失败时显示的文本
})

3.在需要懒加载的img标签上使用v-lazy指令

<template>
  <div>
    <img v-lazy="imgUrl" alt="图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: '需要懒加载的图片地址'
    }
  }
}
</script>

vue3图片懒加载 插件

可以使用vue-lazyload插件来实现图片懒加载。

安装：

npm install vue-lazyload --save

使用：

main.js中引入：

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

在模板中使用：

<template>
  <div>
    <img v-lazy="imgUrl">
  </div>
</template>

其中imgUrl为需要懒加载的图片地址。可以在图片未显示时显示loading图片，也可以设置error图片：

<template>
  <div>
    <img v-lazy="imgUrl" :loading="loadingImg" :error="errorImg">
  </div>
</template>

另外，插件还提供了一些配置项，例如设置预加载高度、加载失败时重试次数等：

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载高度比例
  error: 'error.jpg', // 加载失败时显示的图片
  loading: 'loading.gif', // 加载时显示的图片
  attempt: 3 // 加载失败时重试次数
})

更多配置项请查看官方文档。