vue3基础语法

https://www.yuque.com/fechaichai/td99ck/peropdqedxg1q6su
https://www.yuque.com/fechaichai/td99ck/slubxnbeeigegsp5
https://www.yuque.com/fechaichai/td99ck/meog43oectpm1af0
https://www.bilibili.com/video/BV1Ac411K7EQ?p=32
https://apifox.com/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e/api-24945669
本课程从Vue3基础入门开始讲起，按照电商业务流程的推进方式逐一按照业务模块进行讲解。课程共分为7章：
1.
2.
3. Home页和一级分类
4. 二级分类和详情
5. 登录和本地购物车
6. 接口购物车和支付
7. 用户中心和拓展课程

Day0 ：Git
1.1 git安装及用户信息配置
当安装git后需要对用户信息进行配置，让git服务器知道上传的对象是谁
Git config --global --list
查看本地用户配置（配置文件在c盘的.gitconfig文件中）

git config --global user.name “xiehanqi”
git config --global user.email “1097966132@qq.com”
配置用户信息
1.2 git基本理论（核心）
一、核心四个区域：

1. 工作区

2. 暂存区（index、stage）：存放临时改动，本质是一个文件，存放即将提交到文件列表信息

3. 本地仓库（repository）：安全存放数据的位置，有提交到所有版本的数据。其中head指向最新放入仓库的版本

4. 远程仓库（remote）：代码托管服务器
   [图片]
   二、一般工作流程：
   [图片]
   [图片]
   [图片]
   1.3 git项目创建
   创建git管理的2种方式：

5. 本地空文件夹中 git init 创建本地仓库

6. 在空文件夹中 git clone 克隆远程仓库的项目（此时以被git控制）
   [图片]
   1.4 Git ignore
   [图片]
   1.5 配置ssh公钥并与gitee远程仓库绑定
   步骤：
   https://help.gitee.com/base/account/SSH%E5%85%AC%E9%92%A5%E8%AE%BE%E7%BD%AE
   2.1 vscode集成Git
   git remote -v 查看当前项目所连接的远程仓库
   可以添加远程存储库，建立与远程库的连接
   [图片]
   Git pull 与git clone
   [图片]
   工作流：
   1、对本地代码进行修改，可以查看文件修改的地方，绿色表示变更区域。执行git add .加入暂存区，并git commit -m “first commit”将暂存区加入本地仓库，此时本地有commit待同步到远程仓库
   [图片]
   2、pull表示从远程仓库拉取代码，更新本地代码。有三种情况：

7. 若本地没有进行任何更新，且代码树干净（没有暂存、untracked文件、待commit文件），远程仓库有更新代码，此时会将远程代码更新到本地。

8. 若本地有代码更新，并add、commit后，此时会出现本地领先远程仓库几个commit，此时push到远程仓库，更新远程仓库代码
   [图片]

9. 本地有代码修改，且代码树不干净，此时不可以进行pull

10. 若本地代码修改，代码树干净，只是存在待push的文件，此时pull，会出现合并操作，需要对比远程仓库和本地仓库的区别，并将文件进行合并操作。
    一、Day1：Vue3入门
    1.0 vue3生命周期

11. setup只创建data、method

12. 后面的4个生命周期与dom元素相关
    [图片]
    [图片]
    1.1
    要求安装node.js
    组合式API
    ref函数生成响应式数据
    [图片]
    项目创建
    项目结构：

1.2
1.3
1.4

大致过程：
1、在main.js中，将App根组件作为参数生成一个应用实例对象
2、将渲染结果，挂载到id为app的节点上（index.html）
axios
项目整体架构：
项目创建：
新的脚手架工具
由vue-cli（底层基于webpack）变化为create-vue脚手架工具（底层Vite）

1.5 setup语法糖
script标签 -->setup语法糖的设置
可以省去setup（）、export default方法创建，以及创建后数据/函数，不需要再用return，将其作为对象return出去，此时可以直接在template中使用
[图片]
1.6 reactive & ref
[图片]
ref接受简单数据类型或对象生成响应式对象，script修改ref时必须使用.value

1.7 computerd计算属性
小案例：将数组大于2的数字提取，基于computed
[图片]
唯一作用：根据数据计算得到结果
[图片]
1.8 watch 函数
1、作用：监听1个或多个数据变化，并执行回调函数。
2个额外参数：immediate（立即执行）、deep（深度监听）（ps：主要区别在于接受的数据是常规数据类型还是对象，若是对象则需要开启deep参数，才能够执行watch回调函数）
[图片]
没有设定参数的watch：相当于输入框输入字符时才开始导航
[图片]
相当于输入框还没输入时，给出导航

若使用ref接受对象，此时在script中修改该响应式对象的属性值，不会执行watch的回调函数，此时需要设置deep参数，才能够执行回调函数，进行监听
[图片]
问题：当接受对象转为响应式对象后，需要开启deep属性才能够执行回调函数。此时会递归遍历对象的所有属性，当任意属性发生变化时都会执行回调函数。可以使用精确监听某个具体属性。（建议：一般工作中使用精确监听）
[图片]
[图片]
1.9 生命周期函数
setup替代beforeCreate/created
关键点：生命周期函数可以定义多次，按照顺序依次执行
[图片]
[图片]
1.10 父向子
传递：（常规数据类型/响应式数据对象）
definProps：编译器标识
[图片]
1、父传子步骤：

1. 父组件导入子组件（此时只需要setup语法糖，就不需要对子组件进行注册（component:[]）可以直接使用子组件）
2. 父组件中定义自定义属性，若是响应式数据（:count =“count” ）
3. 子组件定义defineProps接收
   1.11 子传父
   [图片]
   步骤：
4. 父组件中绑定自定义事件，并且声明getmessage函数，并等待接受msg参数
5. 绑定事件，将get-message传递给子组件
6. 通过defineEmits生成emit方法
7. emit函数触发，并传递参数
   1.12 模板引用 （父向子）
   方向：往往是父向子
8. 通过ref标识获取dom对象或组件的实例对象
9. 获取ref的时机：组件挂载完毕（在onMounted生命周期中执行可以获得ref值）
10. ref相当于容器，装着dom元素或组件的实例对象，并且.value存储着对应的值。
11. 通过ref能够获取到组件的属性或方法，但默认情况下setup语法糖为了保护组件不被修改，组件的属性和方法不能直接访问，需要使用defineExpose指定哪些属性或方法允许被访问
    [图片]
    [图片]
    1.12 跨层组件通信
    [图片]
    [图片]
    1、问题：多层组件的情况，希望最高层的组件向底层的组件传递数据/响应式数据？
    利用provide、inject接收，且这种传递是单向数据流
    2、问题：如何在底层组件也引用上层组件的方法？
    provide、inject 将方法发送。（但是要满足谁的数据谁修改的原则，组件不修改其他组件的属性和方法）
    3、问题：是否可以用ref模板调用的方式得到上层组件的方法？
    ref模板调用，一般是父传子的方向
    [图片]
    [图片]
    1.13 vue3综合案例
    了解一个项目首先看package.json
    axios（async、await）
    手动mock假服务提供数据，供前端测试
    需求一：渲染列表
    步骤：
    1、axios获取列表数据并渲染
    2、挂载时（onMounted）调用该接口
    [图片]
    需求二：删除并更新列表
    1、axios获取该行id（用default获取当前row.id）
    2、调用接口删除该id所在行
    3、重新执行getlist（），更新列表
    [图片]
    二、Day2：Pinia和项目起步
    2.1 pinia 状态管理库
    https://pinia.vuejs.org/zh/
    一、特性：
    [图片]
    二、步骤
    1、在store/count.js中，以组合式API的风格（：=()=>{}回调函数）定义store
    2、并导出
    3、组件导入该store，并创建实例使用其方法和属性
    [图片]
    2.2 getter 与异步action
    问题一：getter与action相当与vue2什么？
    Getter — computer
    Action — method
    [图片]
    [图片]
    [图片]
    问题：如何在store中用axios接受数据并用list保存，并且在组件中创建实例对象，获取该store实例对象的list数据并打印出来？在组件中onmounted周期函数中定义了请求数据的方法，此时打印list打印不出来？
    但是可以在template中直接渲染list，也可以定义一个方法，当点击时打印list数据，这也可以，就是在script中请求完数据，立即打印list不行，可能存在一个周期函数的问题？script执行的顺序？
    渲染列表：
    [图片]
    2.3 storeToRefs 对数据解构赋值并保持响应性
    存在疑问：可以用解构赋值的方式，在template中使用store的属性和方法都要使用countStore.的方式，用简便的属性名/方法可以吗（count），而不需要写繁琐的countStore.count？
    答：直接解构赋值，但会出现响应式丢失，需要用storeToRefs保持响应式
    [图片]
    [图片]

结论：如果想使用解构赋值（即直接使用store属性名，而不用countStore.去引用），又想保持响应式：
1、组件中：使用storeToRefs对数据进行包裹，会将数据转为响应式对象。（该方法只针对state：数据）
2、组件中：使用常规的解构赋值，保持方法的响应式（不可以使用storeToRefs）
[图片]

2.4 项目创建
[图片]
[图片]
[图片]
package.json：项目依赖文件、启动命令
vite.config.js：项目配置文件
2.5 别名路径联想提示
[图片]
2.6 element-Plus 按需引入
自动按需导入，当组件中用到某些组件，会自动引入css/js文件，并且不需要import
[图片]
2.7 定制elementPlus主题
Npm i sass -D（-D：只在开发环境中安装）
[图片]
2.8 路由整体设计
路由设计原则：找页面的切换方式，如果是整体切换，则为一级路由，如果是在一级路由的内部进行的内容切换，则为二级路由

2.9 axios配置
[图片]
返回值为promise，可以用.then获取返回值
[图片]
2.7 项目路由设计
修改eslint规则，去掉bug
[图片]
问题：如何定义路由？
1、确定一级路由和二级路由，在router/index.js中定义
[图片]
2、一级路由，在App.vue中用roterview定义路由出口
[图片]
3、二级路由，如category与home，在一级路由组件中定义二级路由出口
4、此时访问http://localhost:5173/，渲染layout以及home，访问http://localhost:5173/category，渲染layout和category。（home为默认二级路由，path:''为空，此时访问/会渲染home）
[图片]
2.9 静态资源引入 和error插件安装
静态样式文件common.scss导入并在main.js中import
2.10 scss自动导入
[图片]
[图片]
[图片]

2.14 图标引入
Iconfont font-class引入

2.15 一级导航渲染
[图片]
2.16 吸顶导航
[图片]
基于vueUse （包含很多的函数，包括获取滚动距离）
[图片]
2.17 pinia 优化layout
[图片]
[图片]
步骤：

1. 用pinia将数据（state）管理起来，并下发给2个组件。仅在2个子组件共同的父组件中，定义好数据（state），与方法（action），并在onmounted中挂在
   [图片]
2. action触发时间很重要，不可以是2个子组件，否则又会执行2次，此时由2个子组件的共同的父组件触发。在子组件中只要导入该方法并调用即可，不需要定义数据。
3. 子组件中只需要导入store，并创建实例获取数据即可
   [图片]
   三、Day3 Home
   3.1 整体结构拆分与搭建
   共4个组件
   [图片]
   3.2 轮播图实现
   [图片]
   3.3 home面板封装
   [图片]
   [图片]
   步骤：
   1、观察页面哪些是非复杂的模板/复杂模板，分别在子组件中定义props、slot
   2、在父组件中向props传递值
   [图片]
   [图片]

[图片]
3.4
ps：
一、如果有反复请求的接口数据：
1、一般需要先封装axios基地址—>
2、封装http实例创建模板、拦截器—>
3、将该请求方法由pinia管理 ，并构建store模板 ---->
4、父组件触发构建store实例对象----->
5、子组件创建store实例，并使用变量
二、若只有某个组件使用一次接口数据， 就不用pinia管理
1、直接创建请求接口方法并使用数据
[图片]
步骤：
1、在之前定义好homePanel模板后（定义了props、slot）
2、将homePanel放入HomeNew中，homePanel作为可复用的子组件，创建出“新鲜好物”panel放入homenew中，创建出“商品热卖”放入homeHot中
[图片]
3.5 图片懒加载
[图片]
[图片]
[图片]

1. 空指令的实现：main.js中定义全局指令，目的：获得某个dom元素的属性（如打印某img元素对象–el，以及某个属性值–binding.value），或对该dom元素属性进行修改/逻辑判断。ps：空指令的定义方式如生命周期，可知是在挂载后才能够通过全局指令获取元素属性。
2. vueUse函数：实现监控某一dom元素的位置，是否进入视图，并返回bool值
3. 在空指令中定义，若只有该元素进入视窗区（即bool=true），才将接口数据绑定给src元素，此时才发送图片请求
4. 最终：实现图片懒加载，只有该元素在视窗时，才会发送该图片的请求，渲染图片，不造成资源浪费，节省请求资源
   3.8 懒加载指令优化
   [图片]
   此时执行的流程：
   1、在main.js（入口文件）中，执行app.use（directivePlugin），加载该插件
   2、在directive中，会传入app实参，并执行全局指令等操作
   [图片]
   防止内存浪费
   3.7 Home-product 产品列表实现
   [图片]
   3.8 封装goodsitem
   [图片]

[图片]
面包屑导航
目的：让用户知道当前所处的页面在哪（需要获取当前的route）
[图片]
获取路由参数

二、Day4