<template>
  <div class="app-header-sticky" :class="{ show: y > 78 }">
    <div class="container">
      <RouterLink class="logo" to="/" />
      <!-- 导航区域 -->
      <ul class="app-header-nav">
        <li class="home" v-for="item in getCategoryList" :key="item.id">
          <RouterLink to="/">{{ item.name }}</RouterLink>
        </li>
      </ul>

      <div class="right">
        <RouterLink to="/">品牌</RouterLink>
        <RouterLink to="/">专题</RouterLink>
      </div>
    </div>
  </div>
</template>


<style scoped lang='scss'>
.app-header-sticky {
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
  // 此处为关键样式!!!
  // 状态一：往上平移自身高度 + 完全透明
  transform: translateY(-100%);
  opacity: 0;

  // 状态二：移除平移 + 完全不透明
  &.show {
    transition: all 0.3s linear;
    transform: none;
    opacity: 1;
  }

  .container {
    display: flex;
    align-items: center;
  }

  .logo {
    width: 200px;
    height: 80px;
    background: url("@/assets/images/logo.png") no-repeat right 2px;
    background-size: 160px auto;
  }

  .right {
    width: 220px;
    display: flex;
    text-align: center;
    padding-left: 40px;
    border-left: 2px solid $xtxColor;

    a {
      width: 38px;
      margin-right: 40px;
      font-size: 16px;
      line-height: 1;

      &:hover {
        color: $xtxColor;
      }
    }
  }
}

.app-header-nav {
  width: 820px;
  display: flex;
  padding-left: 40px;
  position: relative;
  z-index: 998;

  li {
    margin-right: 40px;
    width: 38px;
    text-align: center;

    a {
      font-size: 16px;
      line-height: 32px;
      height: 32px;
      display: inline-block;

      &:hover {
        color: $xtxColor;
        border-bottom: 1px solid $xtxColor;
      }
    }

    .active {
      color: $xtxColor;
      border-bottom: 1px solid $xtxColor;
    }
  }
}
</style>

vueUse

1. 安装Vueuse
VueUse 的官方（https://vueuse.org/）的介绍说这是一个 Composition API 的工具集合，适用于 Vue 2.x 或者 Vue 3.x，用起来和 React Hooks 还挺像的。

VueUse 插件的安装

useScroll

响应式获取滚动位置和状态。

<script setup lang="ts">
import { useScroll } from '@vueuse/core'

const el = ref<HTMLElement | null>(null)
const { x, y, isScrolling, arrivedState, directions } = useScroll(el)
</script>

<template>
  <div ref="el"></div>
</template>

Layout-Pinia优化重复请求

为什么要优化

结论:俩个导航中的列表是完全一致的，但是要发送俩次网络请求，存在浪费。通过Pinia集中管理数据，再把数据给组件使用

如何优化

Home-懒加载指令优化

场景和指令用法

场景:电商网站的首页通常会很长，用户不一定能访问到页面靠下面的图片，这类图片通过懒加载优化手段可以做到只有进入视口区域才发送图片请求

指令用法:

在图片img身上绑定指令，该图片只有在正式进入到视口区域时才会发送图片网络请求

实现思路和步骤

核心原理:图片进入视口才发送资源请求

回顾核心步骤代码

Home-懒加载指令优化

问题1:逻辑书写位置不合理

问:懒加载指令的逻辑直接写到入口文件中，合理吗?

答:不合理，入口文件通常只做一些初始化的事情，不应该包含太多的逻辑代码，可以通过插件的方法把懒加载指令封装为插件，main.js入口文件只需要负责注册插件即可

问题2:重复监听问题

useIntersectionObserver对于元素的监听是一直存在的，除非手动停止监听，存在内存浪费解决思路:在监听的图片第一次完成加载之后就停止监听

// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
    install(app) {
        app.directive('img-lazy', {
            mounted(el, binding) {
                // el: 指令绑定的那个元素 img
                // binding: binding.value  指令等于号后面绑定的表达式的值  图片url
                console.log(el, binding.value);
                // 会重复监听  复制完成后调用stop 停止监听
                const { stop } = useIntersectionObserver(
                    el,
                    ([{ isIntersecting }]) => {
                        console.log(isIntersecting, '是否进入到视口区域');
                        if (isIntersecting) {
                            // 进入视口区域
                            el.src = binding.value
                            stop()
                        }
                    }
                )
            },
        })
    }
}

import { lazyPlugin } from '@/directives'
app.use(lazyPlugin)

一级分类-解决路由缓存问题

什么是路由缓存问题

题:一级分类的切换正好满足上面的条件，组件实例复用，导致分类数据无法更新解决问题的思路:1. 让组件实例不复用，强制销毁重建 2. 监听路由变化，变化之后执行数据更新操作

方案一:给router-view添加key

以当前路由完整路径为key的值，给router-view组件绑定

方案二:使用beforeRouteUpdate导航钩子

beforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可

import { onBeforeRouteUpdate } from "vue-router";
// 路由参数变化的时候，可以将分类接口重新发送
onBeforeRouteUpdate((to) => {
  console.log("路由变化了");
  //   存在问题：使用最新的路由参数 请求最新的分类数据
  getTopCategory(to.params.id);
});



  <!-- 添加key 破坏副用机制 强制销毁重建 -->
  <!-- <router-view :key="$route.fullPath"></router-view> -->

一级分类-使用逻辑函数拆分业务

概念理解

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

具体怎么做

实现步骤:
1. 按照业务声明以 `use` 打头的逻辑函数

2. 把独立的业务逻辑封装到各个函数内部
3. 函数内部把组件中需要用到的数据或者方法return出去

4. 在组件中调用函数把数据或者方法组合回来使用

核心思想总结

1. 逻辑拆分的过程是一个拆分再组合的过程

2. 函数use打头，内部封装逻辑，return组件需要用到的数据和方法给组件消费

// 封装banner相关业务代码
import { getBannerAPI } from "@/apis/layout";
import { onMounted, ref } from "vue";
export function useBanner() {
    const bannerList = ref([]);
    const getBanner = async () => {
        const res = await getBannerAPI({
            distributionSite: "2",
        });
        console.log(res);
        bannerList.value = res.result;
    };
    onMounted(() => {
        getBanner();
    });
    return {
        bannerList
    }
}

<script setup>
import { useBanner } from "@/composables/useBanner";
const { bannerList } = useBanner();
</script>

二级分类-商品列表实现

列表无限加载功能实现

核心实现逻辑:使用elementPlus提供的 v-infinite-scroll 指令监听是否满足触底条件，满足加载条件时让页数参数加一获取下一页数据，做新老数据拼接渲染

     <div
        class="body"
        v-infinite-scroll="load"
        :infinite-scroll-disabled="disabled"
      >
        <!-- 商品列表-->
        <GoodsItem v-for="good in goodList" :goods="good" :key="good.id" />
      </div>


// 加载更多
const disabled = ref(false)
const load = async () => {
  console.log('加载更多数据咯')
  // 获取下一页的数据
  reqData.value.page++
  const res = await getSubCategoryAPI(reqData.value)
  goodList.value = [...goodList.value, ...res.result.items]
  // 加载完毕 停止监听
  if (res.result.items.length === 0) {
    disabled.value = true
  }
}

定制路由行为解决什么问题

在不同路由切换的时候，可以自动滚动到页面的顶部，而不是停留在原先的位置

如何配置:vue-router支持 scrollBehavior 配置项，可以指定路由切换时的滚动位置

详情页-图片预览组件封装

通过小图切换大图实现

思路:维护一个数组图片列表，鼠标划入小图记录当前小图下标值，通过下标值在数组中取对应图片，显示到大图位置

放大镜效果实现

放大镜效果实现 - 滑块跟随鼠标移动

思路: 获取到当前的鼠标在盒子内的相对位置(useMouseInElement)，控

制滑块跟随鼠标移动(left/top)

1. 有效移动范围内的计算逻辑
横向:100 < elementX < 300，left = elementX - 小滑块宽度一半

纵向: 100 < elementY < 300，top = elementY - 小滑块高度一半

2. 边界距离控制

横向:elementX > 300 left = 200 ，elementX < 100 left = 0

纵向:elementY > 300 top = 200， elementY < 100 top = 0

放大镜效果实现 - 大图效果实现

放大镜效果实现 - 鼠标移入控制显隐

总结

<script setup>
import { ref, watch } from "vue";
import { useMouseInElement } from "@vueuse/core";

defineProps({
  imageList: {
    type: Array,
    default: () => {},
  },
});
// 图片列表
// const imageList = [
//   "https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
//   "https://yanxuan-item.nosdn.127.net/e801b9572f0b0c02a52952b01adab967.jpg",
//   "https://yanxuan-item.nosdn.127.net/b52c447ad472d51adbdde1a83f550ac2.jpg",
//   "https://yanxuan-item.nosdn.127.net/f93243224dc37674dfca5874fe089c60.jpg",
//   "https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg",
// ];
// 小图切换 大图显示
const curIndex = ref(0);
// 实现鼠标移入交互
const mouseEnterFn = (i) => (curIndex.value = i);
//  获取鼠标相对位置
const target = ref(null);
const { elementX, elementY, isOutside } = useMouseInElement(target);
//  控制滑块跟随鼠标移动（监听elementX/Y变化，一旦变化 重新设置left/top）
const left = ref(0);
const top = ref(0);

const positionX = ref(0);
const positionY = ref(0);
watch([elementX, elementY, isOutside], () => {
  console.log("xy变化了");
  // 如果鼠标没有移入到盒子里面 直接不执行后面的逻辑
  if (isOutside.value) return;
  // 有效范围内控制滑块距离
  // 横向
  if (elementX.value > 100 && elementX.value < 300) {
    left.value = elementX.value - 100;
  }
  // 纵向
  if (elementY.value > 100 && elementY.value < 300) {
    top.value = elementY.value - 100;
  }
  // 处理边界
  if (elementX.value > 300) {
    left.value = 200;
  }
  if (elementX.value < 100) {
    left.value = 0;
  }

  if (elementY.value > 300) {
    top.value = 200;
  }
  if (elementY.value < 100) {
    top.value = 0;
  }
  // 控制大图的显示
  positionX.value = -left.value * 2;
  positionY.value = -top.value * 2;
});
</script>


<template>
  <div class="goods-image">
    <!-- 左侧大图-->
    <div class="middle" ref="target">
      <img :src="imageList[curIndex]" alt="" />
      <!-- 蒙层小滑块 -->
      <div
        class="layer"
        v-show="!isOutside"
        :style="{ left: `${left}px`, top: `${top}px` }"
      ></div>
    </div>
    <!-- 小图列表 -->
    <ul class="small">
      <li
        v-for="(img, i) in imageList"
        :key="i"
        @mouseenter="mouseEnterFn(i)"
        :class="{ active: i === curIndex }"
      >
        <img :src="img" alt="" />
      </li>
    </ul>
    <!-- 放大镜大图 -->
    <div
      class="large"
      :style="[
        {
          backgroundImage: `url(${imageList[curIndex]})`,
          backgroundPositionX: `${positionX}px`,
          backgroundPositionY: `${positionY}px`,
        },
      ]"
      v-show="!isOutside"
    ></div>
  </div>
</template>

<style scoped lang="scss">
.goods-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;

  .middle {
    width: 400px;
    height: 400px;
    background: #f5f5f5;
  }

  .large {
    position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    z-index: 500;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    // 背景图:盒子的大小 = 2:1  将来控制背景图的移动来实现放大的效果查看 background-position
    background-size: 800px 800px;
    background-color: #f8f8f8;
  }

  .layer {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.2);
    // 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来
    left: 0;
    top: 0;
    position: absolute;
  }

  .small {
    width: 80px;

    li {
      width: 68px;
      height: 68px;
      margin-left: 12px;
      margin-bottom: 15px;
      cursor: pointer;

      &:hover,
      &.active {
        border: 2px solid $xtxColor;
      }
    }
  }
}
</style>

详情页-通用组件统一注册全局

为什么要优化

背景:components目录下有可能还会有很多其他通用型组件，有可能在多个业务模块中共享，所有统一进行全局组件注册比较好

//  把commponents中的组件进行全局注册
// 通过插件的方式
import imageView from "@/components/imageView/index.vue";
import sku from "@/components/XtxSku/index.vue";
export const commponentsPlugin = {
    install(Vue) {
        // Vue.component(组件名字, 组件对象)
        Vue.component('imageView', imageView)
        Vue.component('sku', sku)
    }
}


import { commponentsPlugin } from '@/components/index'
app.use(commponentsPlugin)