vueuse中的懒加载

在 Vue.js 中，可以使用 vue-router 的懒加载来延迟加载组件。vueuse 是一个提供常用 Vue Composition API 函数的库，其中包含了一个名为 useAsyncComponent 的函数，用于实现组件的懒加载。

使用 useAsyncComponent 可以按需加载组件，只有当组件需要被渲染时才会加载对应的 JavaScript 代码。这样可以提高页面加载速度和减少初始加载的资源。

以下是使用 vueuse 中的 useAsyncComponent 的示例代码：

import { defineAsyncComponent } from 'vue'
import { useAsyncComponent } from '@vueuse/core'

// 使用 defineAsyncComponent 创建异步组件
const AsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue'))

export default {
  components: {
    // 使用 useAsyncComponent 包装异步组件
    AsyncComponent: useAsyncComponent(AsyncComponent)
  }
}

在上面的示例中，通过 defineAsyncComponent 创建了一个异步组件 AsyncComponent，然后使用 useAsyncComponent 包装该组件。最后，将包装后的组件注册到 Vue 组件中的 components 属性中。

这样，在需要渲染 AsyncComponent 组件时，会自动触发异步加载组件的 JavaScript 代码，从而实现懒加载效果。

1vueuse中的图片懒加载

在 Vue.js 中，可以使用 vue-lazyload 库实现图片的懒加载功能。而在 vueuse 库中，提供了一个名为 useIntersectionObserver 的函数，可以方便地集成图片懒加载功能。

以下是使用 vueuse 中的 useIntersectionObserver 实现图片懒加载的示例代码：

安装 vue-lazyload 和 vueuse：
```
npm install vue-lazyload @vueuse/core
```

在 main.js 中引入 vue-lazyload：

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

const app = createApp(App)
app.use(VueLazyload)

app.mount('#app')

在组件中使用 useIntersectionObserver：

<template>
  <img v-if="isIntersecting" :src="imageUrl" alt="Image" />
  <div ref="target"></div>
</template>

<script>
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)
    const isIntersecting = useIntersectionObserver(target, {
      once: true,
      threshold: 0.1
    })

    const imageUrl = 'https://example.com/my-image.jpg'

    return {
      target,
      isIntersecting,
      imageUrl
    }
  }
}
</script>

在上面的示例中，使用 useIntersectionObserver 监听目标元素 target 是否在视口中可见。一旦目标元素进入视口中并达到阈值（这里设定为 0.1），isIntersecting 将变为 true，然后可以加载并显示图片。

通过结合 vue-lazyload 和 vueuse 的 useIntersectionObserver，可以实现图片的懒加载效果，提高页面加载速度和优化用户体验。

1vueuse中的图片懒加载

猜你喜欢