vue3项目实战-轮播图实现，页面组件封装，图片懒加载，组件封装，使用逻辑函数拆分业务

轮播图实现

element-plus组件搭建静态结构

<template>
  <div class="home-banner">
    <el-carousel height="500px">
      <el-carousel-item v-for="item in 4" :key="item">
        <img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/6d202d8e-bb47-4f92-9523-f32ab65754f4.jpg" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

封装接口

apis下新建home.js,添加以下代码（这里的接口是后台提供的，每个项目对应的都不一样，这里只提供方法，以自己的项目为准）

import  httpInstance  from '@/utils/http'
// 获取banner
export function getBannerAPI( params = {}) {
  // 默认为1,商品为2
  const { distributionSite = "1" } = params
  return httpInstance({
    url:'/home/banner',
    params:{
      distributionSite

    }
  })
}

获取组件数据渲染模板

在home文件夹下的index.vue中添加如下代码

主要思路如下：

首先，定义存在轮播图数据的列表，然后，定义获取轮播图数据的方法（调用接口拿到数据），最后，执行onMounted钩子函数调用一下方法，最后在组件中渲染出来。

<script setup>
import { getBannerAPI } from '@/apis/home'
import { onMounted, ref } from 'vue'
const bannerList = ref([])
const getBanner = async () => {
  const res = await getBannerAPI()
  console.log(res)
  bannerList.value = res.result
}
onMounted(() => getBanner())
</script>
<template>
  <div class="home-banner">
    <el-carousel height="500px">
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <img :src="item.imgUrl" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

完成以上步骤后，保存代码，在浏览器中就可以看到轮播图被渲染了出来，运行结果在这里不再粘贴。

页面组件封装

使用场景：在开发中，我们会经常遇到这样一个问题，好多页面它的结构是一模一样的，只是内容不同而已，如果我们在每个页面中都编写同样的代码显然是不合理的，一方面，这会很耗时，另一方面，运行的时候也会给服务器带来很大的负担，需要重复执行很多次同样的代码会对网络资源造成浪费，此时，我们就需要思考一下，能否把这些相同的逻辑代码封装成一个组件，哪里使用它，在哪里调用一下然后将其中的数据进行简单的更换就可以，显然是可行的。俗话说，“只要思想不滑坡，办法总比困难多”，接下来，为大家详细介绍一下实现的流程。

搭建静态结构

<template>
  <div class="home-panel">
    <div class="container">
      <div class="head">
         <!-- 主标题和副标题 -->
        <h3>
          新鲜好物<small>新鲜出炉 品质靠谱</small>
        </h3>
      </div>
      <!-- 主体内容区域 -->
      <div> 主体内容 </div>
    </div>
  </div>
</template>

封装组件

新建一个HomePanel.vue文件，用来存放封装好的组件

首先，使用编译器宏来定义数据的基本类型

<script setup>
defineProps({
  // 主标题
  title: {
    type: String,
  },
  // 副标题
  subTitle: {
    type: String,
  }
})
</script>

添加如下逻辑代码

<template>
  <div class="home-panel">
    <div class="container">
      <div class="head">
         <!-- 主标题和副标题 -->
        <h3>
          {{ title }}<small>{{ subTitle }}</small>
        </h3>
      </div>
      <!-- 主体内容区域 -->
      <slot />
    </div>
  </div>
</template>

简单解释一下，上述代码中，主要渲染了主标题和副标题，至于它是怎么渲染出来的，稍后会做解释。

在本项目中，“新鲜好物”和“人气推荐”模块用到了这一效果，接下来，以新鲜好物为例来详细介绍一下。

调用封装好的组件

在HomeNew.vue中添加如下代码，对封装好的组件进行调用

<template>
  
  <HomePanel title="新鲜好物" sub-title="新鲜出炉-品质靠谱">
    <ul class="goods-list">
      <li v-for="item in newList" :key="item.id">
        <RouterLink to="/">
          <img :src="item.picture" alt="" />
          <p class="name">{{ item.name }}</p>
          <p class="price">&yen;{{ item.price }}</p>
        </RouterLink>
      </li>
    </ul>
  </HomePanel>

</template>

完成之后，简单贴个运行结果：

人气推荐实现的流程跟新鲜好物是一模一样的。

图片懒加载

使用场景：电商类的页面一般会包含很多种分类，每个商品分类页面下都会包含很多内容，如果部分用户打开页面就看到了自己需要的商品，而没有往下滑动页面去浏览更多的内容，那么，页面其他的内容根本就没有用到，如果这时仍然请求接口渲染数据的话很显然就会造成资源浪费，那么，我们可以想象一下，遇到这种情况时，能否让页面下面部分的内容不用渲染，等用户往下滑动（视口变化）到一定位置时再让它向后端发送请求渲染数据，理论上来讲是完全可以的，下面，详细介绍一下这个功能的实现流程。

原理

图片进入视口才发送资源请求

实现流程

指令语法

在这里，用到了vueuse中的一个函数，useIntersectionObserver，可以用它来响应式监听目标元素的可见性。在使用之前，我们需要先导入（存放位置：在directives下新建index.js用来存放项目中用到的插件)

import { useIntersectionObserver } from '@vueuse/core'

然后，封装懒加载指令

注意标红的这几个字段，下面的注释中进行了解释：

指令优化

上述过程，虽然问题是解决了，但也存在一些问题。

首先，懒加载指令的逻辑直接写道入口文件中，很显然是不合理的。入口文件通常只做一些初始化的事情，

不应该包含太多的逻辑代码，在这里，我们可以把懒加载指令封装为插件，main.js只需要负责注册插件即可。

其次，存在重复监听

上下滑动页面时，控制台返回的结果如下：

由于useIntersectionObserver对于元素的监听是一直存在的，除非手动停止监听，否则会存在内存浪费，那么，我们怎样解决这个问题呢？我们可以封装一个方法，第一次加载完毕后，调用一下stop方法让它手动停止，

完成之后，回到浏览器，再次刷新页面，我们可以看到确实重复监听这一问题被解决了

组件封装

使用场景：如果在一个项目中的很多个业务模块中都用到了同样的商品展示模块的话，我们可以不用重复定义，直接封装为一个组件，使用的时候调用即可。

原理

把要显示的数据对象设计为props参数，传入什么数据对象就显示什么数据

实现流程

使用逻辑函数拆分业务

基本概念

基于逻辑函数拆分业务是指把同一个组件中独立的业务代码通过函数做封装处理，提升代码的可维护性

实现步骤

1. 按照业务声明以 `use` 打头的逻辑函数

在Category文件夹下新建文件夹composables，新建useBanner.js和useCategory.js,分别用来存放轮播图相关的业务代码（每个分类下面的轮播图都是一样的）和分类相关的业务代码（点击对应的分类可以直接跳转的对应类别下的商品详情页面）

2. 把独立的业务逻辑封装到各个函数内部

3. 函数内部把组件中需要用到的数据或者方法return出去
4. 在组件中调用函数把数据或者方法组合回来使用

先导入

再调用，

完成之后，回到浏览器点击导航栏对应的分类，下面就可以渲染出对应的内容。

好啦，以上就是对今天项目中使用到的一些技术做一个整理，希望对大家有所帮助，下期见~