VUE3笔记

day1 

 1.项目目录和关键文件 

 项目目录：

 关键文件：

 2.相对于vue2格式上的改变

 setup选项的写法和执行时机

 生命周期图：

在组件渲染的时候会优先执行setup函数，执行时机在beforeCreate之前，自动执行。

 语法糖：减少代码量

---

总结 ：

3.组合式API--reactive和ref函数

reactive（）

作用

 核心步骤

 ref（）

 作用

 核心步骤

 修改ref产生的响应式数据对象  必须通过.value，如下所示

总结 

4.computed计算属性函数

总结

5.watch函数

作用：侦听一个或多个数据的变化，数据变化时执行回调函数。

两个额外的参数：1.immediate(立即执行)，2.deep（深度侦听）

基础使用-侦听单个数据

基础使用-侦听多个数据

 代码过程

immediate

deep

当你修改对象的某个属性的时候，watch是不会侦听修改操作的，如果想要执行，需要在deep中打开。

 精确侦听对象的某个属性

在绝大多数情况下不要开启deep，会有性能损耗。

Vue3的生命周期API（选项式VS组合式）

小结

组合式API下的父传子

基本思想

实现代码

组合式API下的子传父

基本思想

实现代码

小结

day2

模板引用的概念

通过ref标识获取真实的dom对象或者组件的实例对象

如何使用（以获取dom为例 组件同原理）

代码实现

DefineExpose()

总结:

组合式API--provide和inject

作用和场景

跨层传递普通数据

代码实现

跨层传递方法

总结

项目

列表渲染

实现代码

上面的async  和  await 是同步异步请求  

这里不是同步 async await 是异步的 只是他会等待这个请求响应之后继续执行后续代码

注意事项

删除功能

代码实现

上面的row可以拿到id，是根据el-plus的具体内容拿到的

编辑功能

1.打开弹框（获取子组件实例 调用方法或者修改属性）

代码实现

第一次没有实现弹窗是因为没有导入defineExpose，视频课程中并没有导入，以后记得注

意！

2.回填数据（调用详情接口/当前行的静态数据）

代码实现

3.更新数据

代码实现

 day3

axios配置

axios是什么

代码实现

测试接口

总结

项目路由设计

代码实现

设计分类页和默认Home页路由

代码实现

二级路由出口

总结

静态资源初始化

图片资源和样式资源

配置好后要在main.js中引入样式文件

scss文件自动导入

为什么要自动导入

免去手动配置的繁琐，项目启动直接使用。

layout-静态模板结构搭建

先创建3的个板块

再在主页面配置

Layout字体图标引入

如何引入

代码实现

引入的是阿里的图标库

一级导航渲染

代码实现

layout吸顶导航交互实验

获取滚动距离需要安装VueUse插件      安装命令为 npm i @vueuse/core

然后搜索useScroll

代码实现

layout--Pinia优化重复请求

为什么要优化

实现代码

day4

Home整体结构搭建和分类实现

Home模块入口组件中引入并渲染

实现代码

<script setup>
import HomeCategory from './components/HomeCategory.vue'
import HomeBanner from './components/HomeBanner.vue'
import HomeNew from './components/HomeNew.vue'
import HomeHot from './components/HomeHot.vue'
import homeProduct from './components/HomeProduct.vue'
</script>

<template>
  <div class="container">
    <HomeCategory />
    <HomeBanner />
  </div>
  <HomeNew />
  <HomeHot />
  <homeProduct />
</template>

Home-banner轮播图功能实现

首先引入banner轮播图接口

Home中代码实现

Home面板组件封装

场景说明

组件封装

代码实现

总结

Home-新鲜好物和人气推荐实现

新鲜好物实现

代码实现，首先定义接口

然后去新鲜好物页面，记得引入HomePanel

HomePanel里面试衣镜封装好的，直接拿过来用就可以了

人气推荐也是同理，记得去官方资料里面去复制接口和模板

Home图片懒加载

场景和指令用法

实现思路和步骤

代码实现

Home-懒加载指令优化

为什么要优化

实现代码

重复监听问题

Home-Product产品列表实现

Product产品列表

代码实现，记得用上懒加载

Home-GoodsItem组件封装

如何封装

代码实现

一级分类-整体认识和路由配置

代码实现

一级分类-面包屑导航渲染

实现效果

代码实现（报错不用管系统错误）

一级分类-banner轮播图实现

分类轮播图实现

 代码实现

一级分类-激活状态显示和分类列表渲染、

激活状态显示

代码实现

分类列表渲染

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

什么是路由缓存问题

这种方法会存在重复加载banner。

总结

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

概念理解

实现步骤

核心思想总结

day5

二级分类-整体认识和路由配置

代码实现

二级分类-面包屑导航实现

准备接口

/**
 * @description: 获取二级分类列表数据
 * @param {*} id 分类id 
 * @return {*}
 */

export const getCategoryFilterAPI = (id) => {
  return request({
    url:'/category/sub/filter',
    params:{
      id
    }
  })
}

代码实现

二级分类-商品列表实现

准备接口

/**
 * @description: 获取导航数据
 * @data { 
     categoryId: 1005000 ,
     page: 1,
     pageSize: 20,
     sortField: 'publishTime' | 'orderNum' | 'evaluateNum'
   } 
 * @return {*}
 */
export const getSubCategoryAPI = (data) => {
  return request({
    url:'/category/goods/temporary',
    method:'POST',
    data
  })
}

代码实现

添加筛选参数实现筛选功能

代码实现

列表无限加载

代码实现

day6

二级分类-定制路由scrollBehavior

 定制路由行为就是在切换新的二级页面的时候，让滚动条不在原来的位置，而是在最上面的位置。

代码实现

详情页-整体认识和路由配置

路由配置（是二级分类下面的）

代码实现

详情页-基础数据渲染

基础数据渲染

错误原因（看注释）

根据解决方法选择了v-if,但是跟着教程写会报错

需要在brand后面加上？   因为获取的是brand里面的name，而不是整个brand。如果用？.后续都要用，所以还是用v-if方便。

然后根据网页结构去替换对应的数据，变为动态显示

遍历图片

详情页-热榜区域实现

封装Hot热榜组件

获取渲染基础数据

封装接口

/**
 * 获取热榜商品
 * @param {Number} id - 商品id
 * @param {Number} type - 1代表24小时热销榜 2代表周热销榜
 * @param {Number} limit - 获取个数
 */
export const fetchHotGoodsAPI = ({ id, type, limit = 3 }) => {
  return request({
    url:'/goods/hot',
    params:{
      id, 
      type, 
      limit
    }
  })
}

实现代码

模块实现整体分析

适配不同标题Title

根据接口文件里面的参数进行传参

 * @param {Number} type - 1代表24小时热销榜 2代表周热销榜

代码实现

适配不同列表内容

把type：1改为

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

组件功能分析

通过小图切换大图实现

维护一个激活的index

放大镜效果实现

功能拆解

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

控制滑块跟随鼠标移动

代码实现

day7

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

实现代码

上面的图片路径要把 0换为

这样就可以是动态的图片了

组件props适配

实现代码

//props适配图片列表
defineProps({
  imageList:{
    type: Array,
    default:()=>[]
  }
})

然后在

把显示图片改为属性绑定

总结

详情页-SKU组件

SKU的概念

SKU组件使用

代码实现

首先去资料里面导入XtxSku文件包，然后在

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

为什么要优化

插件的逻辑代码

然后去main.js里面去注册

利用插件化手段，把他们进行一个全局注册，省去引用的步骤。

登录-整体认识和路由配置

整体认识

首先去配套文件内复制准备模板。

代码实现

登录-表单校验实现

为什么要校验

表单如何进行校验

表单校验步骤

代码实现

表单校验-自定义校验规则

自定义校验规则

如果默认配置不能满足需求，就要用自定义的校验逻辑，通过时调用函数，不通过时也要调用函数，只不过要new 一个新的Error出来

整个表单的验证

 

代码实现

登录-基础登录业务实现

登录业务流程

1.提示用户

首先在apis文件夹加上一个接口user.js

//封装所有和用户相关的接口函数
import request from '@/utils/http'

export const loginAPI = ({account,password}) => {
    return request({
        url:'/login',
        method:'POST',
        data:{
            account,
            password
        }
    })
}

把接口导入到登录页面的位置

代码实现

2.跳转页面

去拦截器里面统一拦截，统一错误提示（这样配置一次多个接口都可以实现）。所用的样式哪里使用哪里就引入。

登录-Pinia管理用户数据

为什么要用pinia管理数据

如何使用pinia管理数据

代码实现（首先在store里面穿件新的user.js）

然后引入我们的登录页面

把之前的代码删除，用调用action函数替换

关键代码总结

登录-Pinia用户数据持久化

持久化用户数据说明

关键步骤总结和插件运行机制

代码实现

day8

登录-登录和非登录状态的模板适配

需求理解

多模板适配的通用思路

实现代码

登录-请求拦截器携带Token

为什么要在请求拦截器携带token

如何配置

代码实现

登录-退出登录功能实现

退出登录业务实现

代码实现

登录-Token失效401拦截

业务背景

代码实现

购物车功能实现

购物车业务逻辑拆解

本地购物车-加入购物车实现

代码实现

本地购物车-头部购物车列表渲染

首先创建新的组件HeaderCart.vue，然后引入LayoutHeader。

本地购物车-头部购物车删除实现

代码实现

本地购物车-头部购物车统计计算

计算逻辑

代码实现

本地购物车-列表购物车

列表购物车-基础内容渲染

首先在view下创建新的CartList，然后去router里面配置路由，还是在children下面。

实现代码

最后在CartList里面的index.vue中导入数据

day9

列表购物车-单选功能

实现代码

列表购物车-全选

核心思路

1.单选功能实现

2.全选功能实现

购物车列表-统计数据实现

接口购物车

接口购物车-整体业务流程回顾

接口购物车-加入购物车

实现逻辑

实现代码

首先创建新的接口

再去判断是否登录（是否有token），

删除购物车

删除购物车-删除购物车

首先去封装删除的接口

//封装删除接口
export const delCartAPI = (ids) => {
    return request({
        url:'/member/cart',
        method:'delete',
        data: {
            ids
        }
    })
}

实现代码

退出登录-清空购物车列表

业务需求

实现代码

合并购物车到服务器

合并购物车业务实现

结算模块-路由配置和基础数据渲染

路由配置和基础数据渲染

代码实现

结算模块-地址切换交互实现

地址切换交互需求分析

 打开弹框交互实现

去配套文件里面复制准备弹框组件

代码实现

地址激活交互实现

点击实现激活样式实现代码

选中后覆盖原来的地址代码实现

关闭弹窗代码实现

总结

订单模块-生成订单功能实现

业务需求说明

准备支付页路由去配套文件中复制然后去router中配置。

接口封装代码实现

点按钮调用接口，得到订单Id，携带id完成路由跳转代码实现

day10

支付模块-渲染基础数据

渲染基础数据

代码实现

这里出现了一个错误，就是获取不到route.query.id。是在Checkout里面写错了

这样就没问题了

支付模块-实现支付功能

支付业务流程

实现代码

// 支付地址
const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
const backURL = 'http://127.0.0.1:5173/paycallback'
const redirectUrl = encodeURIComponent(backURL)
const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.id}&redirect=${redirectUrl}`

支付模块-支付结果展示

业务需求理解

由于该项目给提供的账号里面没有钱了，网页一直报错

支付模块-封装倒计时函数

理解需求

实现思路分析

实现代码

装一个格式化的插件  dayjs

实现代码

会员中心-整体功能梳理和路由配置

整体功能梳理

路由配置（包括三级路由）

首先去配套文件里把两个页面准备好，然后去router里面配置三级路由

实现代码

汇演中心-个人中心信息渲染

业务需求分析实现

实现代码

会员中心 - 我的订单

订单基础列表渲染

封装接口

代码实现

tab切换实现

代码实现

分页逻辑实现

实现代码

代码实现