文章目录
ES6模块化与异步编程高级用法
1. ES6 模块化
1.1 node.js 中如何实现模块化
node.js 遵循了 CommonJS 的模块化规范。其中：
- 导入其它模块使用 require() 方法
- 模块对外共享成员使用 module.exports 对象
模块化的好处：
大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用，利人利己。
1.2 前端模块化规范的分类
在 ES6 模块化规范诞生之前，JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。
但是，这些由社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：
- AMD 和 CMD 适用于浏览器端的 Javascript 模块化
- CommonJS 适用于服务器端的 Javascript 模块化
太多的模块化规范给开发者增加了学习的难度与开发的成本。因此，大一统的 ES6 模块化规范诞生了！
1.3 什么是 ES6 模块化规范
ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。
ES6 模块化规范中定义：
- 每个 js 文件都是一个独立的模块
- 导入其它模块成员使用 import 关键字
- 向外共享模块成员使用 export 关键字
1.4 在 node.js 中体验 ES6 模块化
node.js 中默认仅支持 CommonJS 模块化规范，若想基于 node.js 体验与学习 ES6 的模块化语法，可以按照如下两个步骤进行配置：
① 确保安装了 v14.15.1 或更高版本的 node.js
② 在 package.json 的根节点中添加 “type”: “module” 节点
1.5 ES6 模块化的基本语法
ES6 的模块化主要包含如下 3 种用法：
① 默认导出与默认导入
② 按需导出与按需导入
③ 直接导入并执行模块中的代码
1. 默认导出
默认导出的语法：
export default
默认导出的成员
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1D3419Gt-1650958972713)(D:\A_study\Vue\vue3_study_image\a1.png)]
2. 默认导入
默认导入的语法：
import 接收名称 from '模块标识符'
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0oIJfr8I-1650958972714)(D:\A_study\Vue\vue3_study_image\a2.png)]
3. 默认导出的注意事项
每个模块中，只允许使用唯一的一次 export default，否则会报错！
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t6vO6NM8-1650958972715)(D:\A_study\Vue\vue3_study_image\a3.png)]
4. 默认导入的注意事项
默认导入时的接收名称可以任意名称，只要是合法的成员名称即可：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z1VDU6VA-1650958972715)(D:\A_study\Vue\vue3_study_image\a4.png)]
5. 按需导出
按需导出的语法： export 按需导出的成员
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-51gd3J15-1650958972716)(D:\A_study\Vue\vue3_study_image\a5.png)]
6. 按需导入
按需导入的语法：
import { s1 } from '模块标识符'
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lSYoDKml-1650958972716)(D:\A_study\Vue\vue3_study_image\a6.png)]
7. 按需导出与按需导入的注意事项
① 每个模块中可以使用多次按需导出
② 按需导入的成员名称必须和按需导出的名称保持一致
③ 按需导入时，可以使用 as 关键字进行重命名
④ 按需导入可以和默认导入一起使用
8. 直接导入并执行模块中的代码
如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码，示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X6VXbEG7-1650958972717)(D:\A_study\Vue\vue3_study_image\a7.png)]
2. Promise
2.1 回调地狱
多层回调函数的相互嵌套，就形成了回调函数。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qu9ND88m-1650958972717)(D:\A_study\Vue\vue3_study_image\a8.png)]
1. 如何解决回调地狱的问题
为了解决回调函数的问题，ES6（ECMAScript 2015）中新增了 Promise 的概念。
2. Promise 的基本概念
① Promise 是一个构造函数
- 我们可以创建 Promise 的实例
const p = new Promise() - new 出来的 Promise 实例对象，代表一个异步操作
② Promise.prototype 上包含一个
.then()
方法
- 每一次 new Promise() 构造函数得到的实例对象，
- 都可以通过原型链的方式访问到 .then() 方法，例如
p.then()
③ .then() 方法用来预先指定成功和失败的回调函数
- p.then(成功的回调函数，失败的回调函数)
p.then(result => { }, error => { })- 调用 .then() 方法时，成功的回调函数是必选的、失败的回调函数是可选的
2.2 基于回调函数按顺序读取文件内容
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EBZF2uTy-1650958972718)(D:\A_study\Vue\vue3_study_image\a9.png)]
2.3 基于 then-fs 读取文件内容
由于 node.js 官方提供的 fs 模块仅支持以回调函数的方式读取文件，不支持 Promise 的调用方式。因此，需要先运行如下的命令，安装 then-fs 这个第三方包，从而支持我们基于 Promise 的方式读取文件的内容：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YZJXwKvj-1650958972718)(D:\A_study\Vue\vue3_study_image\a10.png)]
1. then-fs 的基本使用
调用 then-fs 提供的 readFile() 方法，可以异步地读取文件的内容，它的返回值是 Promise 的实例对象。因此可以调用 .then() 方法为每个 Promise 异步操作指定成功和失败之后的回调函数。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QNdXVDWY-1650958972719)(D:\A_study\Vue\vue3_study_image\a11.png)]
注意：上述的代码无法保证文件的读取顺序，需要做进一步的改进！
import thenFs from 'then-fs'
thenFs.readFile('./files/1.txt','utf8').then((r1) => {console.log(r1)})
thenFs.readFile('./files/2.txt','utf8').then((r2) => {console.log(r2)})
thenFs.readFile('./files/3.txt','utf8').then((r3) => {console.log(r3)})
2. .then() 方法的特性
如果上一个 .then() 方法中返回了一个新的 Promise 实例对象，则可以通过下一个
.then()
继续进行处理。通过
.then()
方法的链式调用，就解决了回调地狱的问题
3. 基于 Promise 按顺序读取文件的内容
Promise 支持链式调用，从而来解决回调地狱的问题。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cMQFuuCw-1650958972719)(D:\A_study\Vue\vue3_study_image\a12.png)]
4. 通过 .catch 捕获错误1
在 Promise 的链式操作中如果发生了错误，可以使用 Promise.prototype.catch 方法进行捕获和处理：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MAGemzv4-1650958972719)(D:\A_study\Vue\vue3_study_image\a13.png)]
5. 通过 .catch 捕获错误2
如果不希望前面的错误导致后续的 .then 无法正常执行，则可以将 .catch 的调用提前，示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZWGD8OkA-1650958972720)(D:\A_study\Vue\vue3_study_image\a14.png)]
6. Promise.all() 方法
Promise.all() 方法会发起并行的 Promise 异步操作，等所有的异步操作全部结束后才会执行下一步的
.then
操作（等待机制）。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1hyz87Iz-1650958972720)(D:\A_study\Vue\vue3_study_image\a15.png)]
注意：数组中 Promise 实例的顺序，就是最终结果的顺序！
7. Promise.race() 方法
Promise.race() 方法会发起并行的 Promise 异步操作，只要任何一个异步操作完成，就立即执行下一步的 .then 操作（赛跑机制）。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RbZwfRnK-1650958972720)(D:\A_study\Vue\vue3_study_image\a16.png)]
2.4 基于 Promise 封装读文件的方法
方法的封装要求：
① 方法的名称要定义为 getFile
② 方法接收一个形参 fpath，表示要读取的文件的路径
③ 方法的返回值为 Promise 实例对象
1. getFile 方法的基本定义
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UMAg7w0f-1650958972721)(D:\A_study\Vue\vue3_study_image\a17.png)]
注意：第 5 行代码中的 new Promise() 只是创建了一个形式上的异步操作
2. 创建具体的异步操作
如果想要创建具体的异步操作，则需要在 new Promise() 构造函数期间，传递一个 function 函数，将具体的异步操作定义到 function 函数内部。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cERhHMRe-1650958972721)(D:\A_study\Vue\vue3_study_image\a18.png)]
3. 获取 .then 的两个实参
通过 .then() 指定的成功和失败的回调函数，可以在 function 的形参中进行接收，示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9tFBObAN-1650958972722)(D:\A_study\Vue\vue3_study_image\a19.png)]
4. 调用 resolve 和 reject 回调函数
Promise 异步操作的结果，可以调用 resolve 或 reject 回调函数进行处理。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kipoZHkW-1650958972722)(D:\A_study\Vue\vue3_study_image\a20.png)]
3. async/await
3.1 什么是 async/await
async/await 是 ES8（ECMAScript 2017）引入的新语法，用来简化 Promise 异步操作。在async/await 出现之前，开发者只能通过链式
.then()
的方式处理 Promise 异步操作。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j2eC4cca-1650958972722)(D:\A_study\Vue\vue3_study_image\a21.png)]
- .then 链式调用的优点：解决了回调地狱的问题
- .then 链式调用的缺点：代码冗余、阅读性差、不易理解
3.2 async/await 的基本使用
使用 async/await 简化 Promise 异步操作的示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AyHw8cV6-1650958972723)(D:\A_study\Vue\vue3_study_image\a22.png)]
3.3 async/await 的使用注意事项
① 如果在 function 中使用了 await，则 function 必须被****async 修饰
② 在 async 方法中，第一个 await 之前的代码会同步执行，await 之后的代码会异步执行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SozW4wVQ-1650958972723)(D:\A_study\Vue\vue3_study_image\a23.png)]
4. EventLoop
4.1 JavaScript 是单线程的语言
JavaScript 是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6dcC9kLm-1650958972723)(D:\A_study\Vue\vue3_study_image\a24.png)]
单线程执行任务队列的问题：
- 如果前一个任务非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题。
4.2 同步任务和异步任务
为了防止某个耗时任务导致程序假死的问题，JavaScript 把待执行的任务分为了两类：
① 同步任务（synchronous）
- 又叫做非耗时任务，指的是在主线程上排队执行的那些任务
- 只有前一个任务执行完毕，才能执行后一个任务
② 异步任务（asynchronous）
- 又叫做耗时任务，异步任务由 JavaScript 委托给宿主环境进行执行
- 当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数
4.3 同步任务和异步任务的执行过程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eOHWtB0b-1650958972724)(D:\A_study\Vue\vue3_study_image\a25.png)]
① 同步任务由 JavaScript 主线程次序执行
② 异步任务委托给宿主环境执行
③ 已完成的异步任务对应的回调函数，会被
加入到任务队列中等待执行
④ JavaScript 主线程的执行栈被清空后，会
读取任务队列中的回调函数，次序执行
⑤ JavaScript 主线程不断重复上面的第 4 步
4.4 EventLoop 的基本概念
JavaScript 主线程从“任务队列”中读取异步任务的回调函数，放到执行栈中依次执行。这个过程是循环不断的，所以整个的这种运行机制又称为 EventLoop（事件循环）。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1JbV8lNo-1650958972724)(D:\A_study\Vue\vue3_study_image\a26.png)]
4.5 结合 EventLoop 分析输出的顺序
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7XniGMec-1650958972724)(D:\A_study\Vue\vue3_study_image\a27.png)]
正确的输出结果：ADCB。其中：
- A 和 D 属于同步任务。会根据代码的先后顺序依次被执行
- C 和 B 属于异步任务。它们的回调函数会被加入到任务队列中，等待主线程空闲时再执行
5. 宏任务和微任务
5.1 什么是宏任务和微任务
JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：
① 宏任务（macrotask）
- 异步 Ajax 请求、
- setTimeout、setInterval、
- 文件操作
- 其它宏任务
② 微任务（microtask）
- Promise.then、.catch 和 .finally
- process.nextTick
- 其它微任务
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9L1fTOUL-1650958972725)(D:\A_study\Vue\vue3_study_image\a28.png)]
5.2 宏任务和微任务的执行顺序
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O4xzS6Rw-1650958972725)(D:\A_study\Vue\vue3_study_image\a29.png)]
每一个宏任务执行完之后，都会检查是否存在待执行的微任务，如果有，则执行完所有微任务之后，再继续执行下一个宏任务。
5.3 去银行办业务的场景
① 小云和小腾去银行办业务。首先，需要取号之后进行排队
- 宏任务队列
② 假设当前银行网点只有一个柜员，小云在办理存款业务时，小腾只能等待
- 单线程，宏任务按次序执行
③ 小云办完存款业务后，柜员询问他是否还想办理其它业务？
- 当前宏任务执行完，检查是否有微任务
④ 小云告诉柜员：想要买理财产品、再办个信用卡、最后再兑换点马年纪念币？
- 执行微任务，后续宏任务被推迟
⑤ 小云离开柜台后，柜员开始为小腾办理业务
- 所有微任务执行完毕，开始执行下一个宏任务
5.4 分析以下代码输出的顺序
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3IJ5LMxa-1650958972726)(D:\A_study\Vue\vue3_study_image\a30.png)]
5.5 经典面试题
请分析以下代码输出的顺序（代码较长，截取成了左中右 3 个部分）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z1TxoMFD-1650958972726)(D:\A_study\Vue\vue3_study_image\a31.png)]
6. API 接口案例
6.1 案例需求
基于 MySQL 数据库 + Express 对外提供用户列表的 API 接口服务。用到的技术点如下：
- 第三方包 express 和 mysql2
- ES6 模块化
- Promise
- async/await
6.2 主要的实现步骤
① 搭建项目的基本结构
② 创建基本的服务器
③ 创建 db 数据库操作模块
④ 创建 user_ctrl 业务模块
⑤ 创建 user_router 路由模块
6.3 搭建项目的基本结构
① 启用 ES6 模块化支持
- 在 package.json 中声明 “type”: “module”
② 安装第三方依赖包
- 运行 npm install express@4.17.1 mysql2@2.2.5
6.4 创建基本的服务器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mg6NPm0t-1650958972726)(D:\A_study\Vue\vue3_study_image\a32.png)]
6.5 创建 db 数据库操作模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RFXRw3HA-1650958972727)(D:\A_study\Vue\vue3_study_image\a33.png)]
6.6 创建 user_ctrl 模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZfEeJyao-1650958972727)(D:\A_study\Vue\vue3_study_image\a34.png)]
6.7 创建 user_router 模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hu9EoYb0-1650958972728)(D:\A_study\Vue\vue3_study_image\a35.png)]
6.8 导入并挂载路由模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4gNdEz8A-1650958972728)(D:\A_study\Vue\vue3_study_image\a36.png)]
6.9 使用 try…catch 捕获异常
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W1k7TGI9-1650958972729)(D:\A_study\Vue\vue3_study_image\a37.png)]
7. 总结
① 能够知道如何使用 ES6 的模块化语法
- 默认导出与默认导入、按需导出与按需导入
② 能够知道如何使用 Promise 解决回调地狱问题
- promise.then()、promise.catch()
③ 能够使用 async/await 简化 Promise 的调用
- 方法中用到了 await，则方法需要被 async 修饰
④ 能够说出什么是 EventLoop
- EventLoop 示意图
⑤ 能够说出宏任务和微任务的执行顺序
- 在执行下一个宏任务之前，先检查是否有待执行的微任务
组件(上)
1. 单页面应用程序
1.1 单页面应用程序的优点
SPA 单页面应用程序最显著的 3 个优点如下：
① 良好的交互体验
- 单页应用的内容的改变不需要重新加载整个页面
- 获取数据也是通过 Ajax 异步获取
- 没有页面之间的跳转，不会出现“白屏现象”
② 良好的前后端工作分离模式
- 后端专注于提供 API 接口，更易实现 API 接口的复用
- 前端专注于页面的渲染，更利于前端工程化的发展
③ 减轻服务器的压力
- 服务器只提供数据，不负责页面的合成与逻辑的处理，吞吐能力会提高几倍
1.2 单页面应用程序的缺点
任何一种技术都有自己的局限性，对于 SPA 单页面应用程序来说，主要的缺点有如下两个：
① 首屏加载慢
- 路由懒加载
- 代码压缩
- CDN 加速
- 网络传输压缩
② 不利于 SEO
- SSR 服务器端渲染
1.3 如何快速创建 vue 的 SPA 项目
vue 官方提供了两种快速创建工程化的 SPA 项目的方式：
① 基于 vite 创建 SPA 项目
② 基于 vue-cli 创建 SPA 项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HXbv4c0h-1650958972729)(D:\A_study\Vue\vue3_study_image\b1.png)]
2. vite 的基本使用
2.1 创建 vite 的项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tEL9JaBf-1650958972729)(D:\A_study\Vue\vue3_study_image\b37.png)]
按照顺序执行如下的命令，即可基于 vite 创建 vue 3.x 的工程化项目：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AA8q6AAg-1650958972730)(D:\A_study\Vue\vue3_study_image\b2.png)]
2.2 梳理项目的结构
使用 vite 创建的项目结构如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RkN6LmFz-1650958972730)(D:\A_study\Vue\vue3_study_image\b3.png)]
1. 梳理项目的结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tXfdZe5q-1650958972731)(D:\A_study\Vue\vue3_study_image\b4.png)]
2.3 vite 项目的运行流程
在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。其中：
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中
1. 在 App.vue 中编写模板结构
清空 App.vue 的默认内容，并书写如下的模板结构：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MI27r6Z4-1650958972731)(D:\A_study\Vue\vue3_study_image\b5.png)]
2. 在 index.html 中预留 el 区域
打开 index.html 页面，确认预留了 el 区域：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MurCSYMR-1650958972731)(D:\A_study\Vue\vue3_study_image\b6.png)]
3. 在 main.js 中进行渲染
按照 vue 3.x 的标准用法，把 App.vue 中的模板内容渲染到 index.html 页面的 el 区域中：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5BGtlFGx-1650958972732)(D:\A_study\Vue\vue3_study_image\b7.png)]
3. 组件化开发思想
3.1 什么是组件化开发
组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。
例如：http://www.ibootstrap.cn/ 所展示的效果，就契合了组件化开发的思想。用户可以通过拖拽组件的方式，快速生成一个页面的布局结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZPBrMNFM-1650958972732)(D:\A_study\Vue\vue3_study_image\b8.png)]
3.2 组件化开发的好处
前端组件化开发的好处主要体现在以下两方面：
- 提高了前端代码的复用性和灵活性
- 提升了开发效率和后期的可维护性
3.3 vue 中的组件化开发
vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件
4. vue 组件的构成
4.1 vue 组件组成结构
每个 .vue 组件都由 3 部分构成，分别是：
- template -> 组件的模板结构
- script -> 组件的 JavaScript 行为
- style -> 组件的样式
其中，每个组件中必须包含 template 模板结构，而 script 行为和style 样式是可选的组成部分。
4.2 组件的 template 节点
vue 规定：每个组件对应的模板结构，需要定义到
<template>
节点中。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vlJxdRsa-1650958972732)(D:\A_study\Vue\vue3_study_image\b9.png)]
注意：
<template>
是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素。
1. 在 template 中使用指令
在组件的
<template>
节点中，支持使用前面所学的指令语法，来辅助开发者渲染当前组件的 DOM 结构。代码示例如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aEQC7UpV-1650958972733)(D:\A_study\Vue\vue3_study_image\b10.png)]
2. 在 template 中定义根节点
在 vue 2.x 的版本中，
<template>
节点内的 DOM 结构仅支持单个根节点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DLQXthWh-1650958972733)(D:\A_study\Vue\vue3_study_image\b11.png)]
4.3 组件的 script 节点
vue 规定：组件内的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ARlOXUOU-1650958972733)(D:\A_study\Vue\vue3_study_image\b12.png)]
1. script 中的 name 节点
可以通过 name 节点为当前组件定义一个名称
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wLs3qcak-1650958972734)(D:\A_study\Vue\vue3_study_image\b13.png)]
2. script 中的 data 节点
vue 组件渲染期间需要用到的数据，可以定义在 data 节点中：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Imt2vOCt-1650958972734)(D:\A_study\Vue\vue3_study_image\b14.png)]
3. 组件中的 data 必须是函数
vue 规定：组件中的 data 必须是一个函数，不能直接指向一个数据对象。因此在组件中定义 data 数据节点时，下面的方式是错误的：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aNe8UOMa-1650958972734)(D:\A_study\Vue\vue3_study_image\b15.png)]
4. script 中的 methods 节点
组件中的事件处理函数，必须定义到 methods 节点中，示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YlyOBe5t-1650958972735)(D:\A_study\Vue\vue3_study_image\b16.png)]
4.4 组件的 style 节点
vue 规定：组件内的
<style>
节点是可选的，开发者可以在
<style>
节点中编写样式美化当前组件的 UI 结构。
<script >
节点的基本结构如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TQXbS8Tf-1650958972735)(D:\A_study\Vue\vue3_study_image\b17.png)]
其中
<style>
标签上的 lang=“css” 属性是可选的，它表示所使用的样式语言。默认只支持普通的 css 语法，可选值还有 less、scss 等。
1. 让 style 中支持 less 语法
如果希望使用 less 语法编写组件的 style 样式，可以按照如下两个步骤进行配置：
① 运行 npm install less -D 命令安装依赖包，从而提供 less 语法的编译支持
② 在
<style>
标签上添加 lang=“less” 属性，即可使用 less 语法编写组件的样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Cdcsj8x-1650958972735)(D:\A_study\Vue\vue3_study_image\b18.png)]
5. 组件的基本使用
5.1 组件的注册
组件之间可以进行相互的引用，例如：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KENgcylA-1650958972736)(D:\A_study\Vue\vue3_study_image\b19.png)]
vue 中组件的引用原则：先注册后使用。
1. 注册组件的两种方式
vue 中注册组件的方式分为“全局注册”和“局部注册”两种，其中：
- 被全局注册的组件，可以在全局任何一个组件内使用
- 被局部注册的组件，只能在当前注册的范围内使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nAAOF7TW-1650958972736)(D:\A_study\Vue\vue3_study_image\b20.png)]
2. 全局注册组件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jgQuRUpP-1650958972736)(D:\A_study\Vue\vue3_study_image\b21.png)]
3. 使用全局注册组件
使用
app.component()
方法注册的全局组件，直接以标签的形式进行使用即可，例如：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cHdeA7nH-1650958972737)(D:\A_study\Vue\vue3_study_image\b22.png)]
4. 局部注册组件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mWd2Orbe-1650958972737)(D:\A_study\Vue\vue3_study_image\b23.png)]
5. 全局注册和局部注册的区别
- 被全局注册的组件，可以在全局任何一个组件内使用
- 被局部注册的组件，只能在当前注册的范围内使用
应用场景：
如果某些组件在开发期间的使用频率很高，推荐进行全局注册；
如果某些组件只在特定的情况下会被用到，推荐进行局部注册。
6. 组件注册时名称的大小写
在进行组件的注册时，定义组件注册名称的方式有两种：
① 使用 kebab-case 命名法（俗称短横线命名法，例如 my-swiper 和 my-search）
② 使用 PascalCase 命名法（俗称帕斯卡命名法或大驼峰命名法，例如 MySwiper 和 MySearch）
短横线命名法的特点：
- 必须严格按照短横线名称进行使用帕斯卡命名法的特点：
- 既可以严格按照帕斯卡名称进行使用，又可以转化为短横线名称进行使用
注意：在实际开发中，推荐使用帕斯卡命名法为组件注册名称，因为它的适用性更强。
7. 通过 name 属性注册组件
在注册组件期间，除了可以直接提供组件的注册名称之外，还可以把组件的 name 属性作为注册后组件的名称，示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LoidYHCK-1650958972737)(D:\A_study\Vue\vue3_study_image\b24.png)]
5.2 组件之间的样式冲突问题
默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。导致组件之间样式冲突的根本原因是：
① 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
② 每个组件中的样式，都会影响整个****index.html 页面中的 DOM 元素
1. 如何解决组件样式冲突的问题
为每个组件分配唯一的自定义属性，在编写组件样式时，通过属 性选择器来控制样式的作用域，示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bpZJDbUA-1650958972738)(D:\A_study\Vue\vue3_study_image\b25.png)]
2. style 节点的 scoped 属性
为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RwZ14GLp-1650958972738)(D:\A_study\Vue\vue3_study_image\b26.png)]
3. /deep/ 样式穿透
如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L1pKkEvZ-1650958972738)(D:\A_study\Vue\vue3_study_image\b27.png)]
注意：/deep/ 是 vue2.x 中实现样式穿透的方案。在 vue3.x 中推荐使用 :deep() 替代 /deep/。
5.3 组件的 props
为了提高组件的复用性，在封装 vue 组件时需要遵守如下的原则：
- 组件的 DOM 结构、Style 样式要尽量复用
- 组件中要展示的数据，尽量由组件的使用者提供
为了方便使用者为组件提供要展示的数据，vue 组件提供了 props 的概念。
1. 什么是组件的 props
props 是组件的自定义属性，组件的使用者可以通过 props 把数据传递到子组件内部，供子组件内部进行使用。代码示例如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-05P7myGC-1650958972739)(D:\A_study\Vue\vue3_study_image\b28.png)]
props 的作用：父组件通过 props 向子组件传递要展示的数据。
props 的好处：提高了组件的复用性。
2. 在组件中声明 props
在封装 vue 组件时，可以把动态的数据项声明为 props 自定义属性。自定义属性可以在当前组件的模板结构中被直接使用。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4bajkW0V-1650958972739)(D:\A_study\Vue\vue3_study_image\b29.png)]
3. 无法使用未声明的 props
如果父组件给子组件传递了未声明的 props 属性，则这些属性会被忽略，无法被子组件使用，示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2jjgCmCC-1650958972740)(D:\A_study\Vue\vue3_study_image\b30.png)]
4. 动态绑定 props 的值
可以使用 v-bind 属性绑定的形式，为组件动态绑定 props 的值，示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b2jNUZ7j-1650958972740)(D:\A_study\Vue\vue3_study_image\b31.png)]
5. props 的大小写命名
组件中如果使用“camelCase (驼峰命名法)”声明了 props 属性的名称，则有两种方式为其绑定属性的值：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I6CdVnK6-1650958972740)(D:\A_study\Vue\vue3_study_image\b32.png)]
5.4 Class 与 Style 绑定
在实际开发中经常会遇到动态操作元素样式的需求。因此，vue 允许开发者通过 v-bind 属性绑定指令，为元素动态绑定 class 属性的值和行内的 style 样式
1. 动态绑定 HTML 的 class
可以通过三元表达式，动态的为元素绑定 class 的类名。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rEdnf9iM-1650958972741)(D:\A_study\Vue\vue3_study_image\b33.png)]
2. 以数组语法绑定 HTML 的 class
如果元素需要动态绑定多个 class 的类名，此时可以使用数组的语法格式：
!b33](D:\A_study\Vue\vue3_study_image\b33.png)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qi6vk7Zz-1650958972741)(D:\A_study\Vue\vue3_study_image\b34.png)]
3. 以对象语法绑定 HTML 的 class
使用数组语法动态绑定 class 会导致模板结构臃肿的问题。此时可以使用对象语法进行简化：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5GOmpK1Z-1650958972741)(D:\A_study\Vue\vue3_study_image\b35.png)]
4. 以对象语法绑定内联的 style
:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PqosxXIX-1650958972742)(D:\A_study\Vue\vue3_study_image\b36.png)]
6. 总结
① 能够说出什么是单页面应用程序及组件化开发
- SPA、只有一个页面、组件是对 UI 结构的复用
② 能够说出 .vue 单文件组件的组成部分
- template、script、style（scoped、lang）
③ 能够知道如何注册 vue 的组件
- 全局注册（app.component）、局部注册（components）
④ 能够知道如何声明组件的 props 属性
- props 数组
④ 能够知道如何在组件中进行样式绑定
- 动态绑定 class、动态绑定 style
组件(下)
1. props 验证
1.1 什么是 props 验证
指的是：在封装组件时对外界传递过来的 props 数据进行合法性的校验，从而防止数据不合法的问题。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cIOPa8Y8-1650958972742)(D:\A_study\Vue\vue3_study_image\c1.png)]
使用数组类型的 props 节点的缺点：无法为每个 prop 指定具体的数据类型。
1.2 对象类型的 props 节点
使用对象类型的 props 节点，可以对每个 prop 进行数据类型的校验，示意图如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f7mmNl9Q-1650958972742)(D:\A_study\Vue\vue3_study_image\c2.png)]
1.3 props 验证
对象类型的 props 节点提供了多种数据验证方案，例如：
① 基础的类型检查
② 多个可能的类型
③ 必填项校验
④ 属性默认值
⑤ 自定义验证函数
1. 基础的类型检查
可以直接为组件的 prop 属性指定基础的校验类型，从而防止组件的使用者为其绑定错误类型的数据：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cdh1E7xV-1650958972743)(D:\A_study\Vue\vue3_study_image\c3.png)]
2. 多个可能的类型
如果某个 prop 属性值的类型不唯一，此时可以通过数组的形式，为其指定多个可能的类型，示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h8X2nP5Z-1650958972743)(D:\A_study\Vue\vue3_study_image\c4.png)]
3. 必填项校验
required 属性
如果组件的某个 prop 属性是必填项，必须让组件的使用者为其传递属性的值。此时，可以通过如下的方式将其设置为必填项：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kSNvNyHA-1650958972743)(D:\A_study\Vue\vue3_study_image\c5.png)]
4. 属性默认值
在封装组件时，可以为某个 prop 属性指定默认值。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KrYnULPo-1650958972744)(D:\A_study\Vue\vue3_study_image\c6.png)]
5. 自定义验证函数
在封装组件时，可以为 prop 属性指定自定义的验证函数，从而对 prop 属性的值进行更加精确的控制
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KuUERvYQ-1650958972744)(D:\A_study\Vue\vue3_study_image\c7.png)]
2. 计算属性
2.1 什么是计算属性
计算属性本质上就是一个 function 函数，它可以实时监听 data 中数据的变化，并 return 一个计算后的新值，供组件渲染 DOM 时使用
2.2 如何声明计算属性
计算属性需要以 function 函数的形式声明到组件的 computed 选项中，示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AaOKimj8-1650958972744)(D:\A_study\Vue\vue3_study_image\c8.png)]
注意：计算属性侧重于得到一个计算的结果，因此计算属性中必须有 return 返回值！
2.3 计算属性的使用注意点
① 计算属性必须定义在 computed 节点中
② 计算属性必须是一个 function 函数
③ 计算属性必须有返回值
④ 计算属性必须当做普通属性使用
2.4 计算属性 vs 方法
相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行运算。因此计算属性的性能更好：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u7euOqX5-1650958972745)(D:\A_study\Vue\vue3_study_image\c9.png)]
3. 自定义事件
3.1 什么是自定义事件
在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时需要用到组件的自定义事件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iagFMacA-1650958972745)(D:\A_study\Vue\vue3_study_image\c10.png)]
3.2 自定义事件的 3 个使用步骤
在封装组件时：
① 声明自定义事件
② 触发自定义事件
在使用组件时：
③ 监听自定义事件
1. 声明自定义事件
开发者为自定义组件封装的自定义事件，必须事先在 emits 节点中声明，示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Tx9fBCP-1650958972745)(D:\A_study\Vue\vue3_study_image\c11.png)]
2. 触发自定义事件
在 emits 节点下声明的自定义事件，可以通过
this.$emit('自定义事件的名称')
方法进行触发，示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E4BTjs2b-1650958972746)(D:\A_study\Vue\vue3_study_image\c12.png)]
3. 监听自定义事件
在使用自定义的组件时，可以通过
v-on
的形式监听自定义事件。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uz61tMC6-1650958972746)(D:\A_study\Vue\vue3_study_image\c13.png)]
3.3 自定义事件传参
在调用
this.$emit()
方法触发自定义事件时，可以通过第 2 个参数为自定义事件传参，示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UMqHQRAI-1650958972747)(D:\A_study\Vue\vue3_study_image\c14.png)]
4. 组件上的 v-model
4.1 为什么需要在组件上使用 v-model
v-model 是双向数据绑定指令，当需要维护组件内外数据的同步时，可以在组件上使用 v-model 指令。示意图如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p0InPyiV-1650958972747)(D:\A_study\Vue\vue3_study_image\c15.png)]
- 外界数据的变化会自动同步到 counter 组件中
- counter 组件中数据的变化，也会自动同步到外界
4.2 在组件上使用 v-model 的步骤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9iBY4z2a-1650958972747)(D:\A_study\Vue\vue3_study_image\c16.png)]
5. 总结
① 能够知道如何对 props 进行验证
- 数组格式、对象格式
- type、default、required、validator
② 能够知道如何使用计算属性
- computed 节点、必须 return 一个结果、缓存计算结果
③ 能够知道如何为组件绑定自定义事件
- v-on 绑定自定义事件、emits、$emit()
④ 能够知道如何在组件上使用 v-model
- 应用场景：实现组件内外的数据同步
- v-model:props名称、emits、$emit(‘update:props名称’)
组件高级（上）
1. watch 侦听器
1.1 什么是 watch 侦听器
watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
例如，监视用户名的变化并发起请求，判断用户名是否可用。
1.2 watch 侦听器的基本语法
开发者需要在 watch 节点下，定义自己的侦听器。实例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bi1IsO45-1650958972748)(D:\A_study\Vue\vue3_study_image\d1.png)]
1.3 使用 watch 检测用户名是否可用
监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H6xIPkgL-1650958972748)(D:\A_study\Vue\vue3_study_image\d2.png)]
1.4 immediate 选项
默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项。实例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bd9Tlu2n-1650958972748)(D:\A_study\Vue\vue3_study_image\d3.png)]
1.5 deep 选项
当 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项，代码示例如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m4z4ymOF-1650958972749)(D:\A_study\Vue\vue3_study_image\d4.png)]
1.6 监听对象单个属性的变化
如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XLwl3JnD-1650958972749)(D:\A_study\Vue\vue3_study_image\d5.png)]
1.7 计算属性 vs 侦听器
计算属性和侦听器侧重的应用场景不同：
计算属性侧重于监听多个值的变化，最终计算并返回一个新值
侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值
2. 组件的生命周期
2.1 组件运行的过程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zpxoGxXp-1650958972749)(D:\A_study\Vue\vue3_study_image\d6.png)]
组件的生命周期指的是：组件从创建 -> 运行（渲染） -> 销毁的整个过程，强调的是一个时间段。
2.2 如何监听组件的不同时刻
vue 框架为组件内置了不同时刻的生命周期函数，生命周期函数会伴随着组件的运行而自动调用。例如：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0tzPYJkE-1650958972750)(D:\A_study\Vue\vue3_study_image\d6.png)]
① 当组件在内存中被创建完毕之后，会自动调用 created 函数
② 当组件被成功的渲染到页面上之后，会自动调用 mounted 函数
③ 当组件被销毁完毕之后，会自动调用 unmounted 函数
2.3 如何监听组件的更新
data 数据发生改变就触发 unpdated 声明周期函数
当组件的 data 数据更新之后，vue 会自动重新渲染组件的 DOM 结构，从而保证 View 视图展示的数据和Model 数据源保持一致。
当组件被重新渲染完毕之后，会自动调用 updated 生命周期函数。
2.4 组件中主要的生命周期函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HlkqwkYK-1650958972750)(D:\A_study\Vue\vue3_study_image\d7.png)]
注意：在实际开发中，created 是最常用的生命周期函数！
2.5 组件中全部的生命周期函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-loyFp9Pw-1650958972750)(D:\A_study\Vue\vue3_study_image\d8.png)]
2.6 完整的生命周期图示
可以参考 vue 官方文档给出的“生命周期图示”，进一步理解组件生命周期执行的过程：https://www.vue3js.cn/docs/zh/guide/instance.html#生命周期图示
3. 组件之间的数据共享
3.1 组件之间的关系
在项目开发中，组件之间的关系分为如下 3 种：
① 父子关系
② 兄弟关系
③ 后代关系
3.2 父子组件之间的数据共享
父子组件之间的数据共享又分为：
① 父 -> 子共享数据
② 子 -> 父共享数据
③ 父 <-> 子双向数据同步
1. 父组件向子组件共享数据
父组件通过 v-bind 属性绑定向子组件共享数据。同时，子组件需要使用 props 接收数据。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Y3UiryU-1650958972750)(D:\A_study\Vue\vue3_study_image\d9.png)]
2. 子组件向父组件共享数据
子组件通过自定义事件的方式向父组件共享数据。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BFWa0FzE-1650958972751)(D:\A_study\Vue\vue3_study_image\d10.png)]
3. 父子组件之间数据的双向同步
父组件在使用子组件期间，可以使用 v-model 指令维护组件内外数据的双向同步：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C7dd3Q7P-1650958972751)(D:\A_study\Vue\vue3_study_image\d11.png)]
3.3 兄弟组件之间的数据共享
兄弟组件之间实现数据共享的方案是 EventBus。可以借助于第三方的包 mitt 来创建 eventBus 对象，从而实现兄弟组件之间的数据共享。示意图如
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PajivIHW-1650958972751)(D:\A_study\Vue\vue3_study_image\d12.png)]
1. 安装 mitt 依赖包
在项目中运行如下的命令，安装 mitt 依赖包：
npm install [email protected]
2. 创建公共的 EventBus 模块
在项目中创建公共的 eventBus 模块如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2XEujZ5t-1650958972752)(D:\A_study\Vue\vue3_study_image\d13.png)]
3. 在数据接收方自定义事件
在数据接收方，调用
bus.on('事件名称', 事件处理函数)
方法注册一个自定义事件。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lzoup0K3-1650958972752)(D:\A_study\Vue\vue3_study_image\d14.png)]
4. 在数据接发送方触发事件
在数据发送方，调用
bus.emit('事件名称', 要发送的数据)
方法触发自定义事件。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4CmSAdFk-1650958972752)(D:\A_study\Vue\vue3_study_image\d15.png)]
3.4 后代关系组件之间的数据共享
后代关系组件之间共享数据，指的是父节点的组件向其子孙组件共享数据。此时组件之间的嵌套关系比较复杂，可以使用 provide 和 inject 实现后代关系组件之间的数据共享。
1. 父节点通过 provide 共享数据
父节点的组件可以通过 provide 方法，对其子孙组件共享数据：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CxXyCY6h-1650958972753)(D:\A_study\Vue\vue3_study_image\d16.png)]
2. 子孙节点通过 inject 接收数据
子孙节点可以使用 inject 数组，接收父级节点向下共享的数据。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PNw6IKeP-1650958972753)(D:\A_study\Vue\vue3_study_image\d17.png)]
3. 父节点对外共享响应式的数据
父节点使用 provide 向下共享数据时，可以结合 computed 函数向下共享响应式的数据。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f25a9bUD-1650958972754)(D:\A_study\Vue\vue3_study_image\d18.png)]
4. 子孙节点使用响应式的数据
如果父级节点共享的是响应式的数据，则子孙节点必须以 .value 的形式进行使用。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rkrZtn0r-1650958972754)(D:\A_study\Vue\vue3_study_image\d19.png)]
3.5 vuex
vuex 是终极的组件之间的数据共享方案。在企业级的 vue 项目开发中，vuex 可以让组件之间的数据共享变得高 效、清晰、且易于维护。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mU19O4dG-1650958972754)(D:\A_study\Vue\vue3_study_image\d20.png)]
3.6 总结
- 父子关系
① 父 -> 子 属性绑定
② 子 -> 父 事件绑定
③ 父 <-> 子 组件上的 v-model
- 兄弟关系
④ EventBus
- 后代关系
⑤ provide & inject
- 全局数据共享
⑥ vuex
4. vue 3.x 中全局配置 axios
4.1 为什么要全局配置 axios
在实际项目开发中，几乎每个组件中都会用到 axios 发起数据请求。此时会遇到如下两个问题：
① 每个组件中都需要导入 axios（代码臃肿）
② 每次发请求都需要填写完整的请求路径（不利于后期的维护）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jxq6eCmD-1650958972755)(D:\A_study\Vue\vue3_study_image\d21.png)]
4.2 如何全局配置 axios
在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios，示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sg6Kkg2U-1650958972755)(D:\A_study\Vue\vue3_study_image\d22.png)]
// main.js
import axios from 'axios'
const app = createApp(App)
axios.defaults.baseURL = 'https://www.escook.cn'
app.config.globalProperties.$http = axios
5. 总结
① 能够掌握 watch 侦听器的基本使用
- 定义最基本的 watch 侦听器
- immediate、 deep、监听对象中单个属性的变化
② 能够知道 vue 中常用的生命周期函数
- 创建阶段、运行阶段、销毁阶段
- created、mounted
③ 能够知道如何实现组件之间的数据共享
- 父子组件、兄弟组件、后代组件
④ 能够知道如何在 vue3 的项目中全局配置 axios
- main.js 入口文件中进行配置
- app.config.globalProperties.$http = axios
组件高级下
1. ref 引用
1.1 什么是 ref 引用
ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。
每个 vue 的组件实例上，都包含一个
$refs
对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的
$refs
指向一个空对象。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dc8gbrV3-1650958972755)(D:\A_study\Vue\vue3_study_image\e1.png)]
1.2 使用 ref 引用 DOM 元素
如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IRhA5pgG-1650958972756)(D:\A_study\Vue\vue3_study_image\e2.png)]
1.3 使用 ref 引用组件实例
如果想要使用 ref 引用页面上的组件实例，则可以按照如下的方式进行操作：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-14u4dmlF-1650958972756)(D:\A_study\Vue\vue3_study_image\e3.png)]
1.4 控制文本框和按钮的按需切换
通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bDM7Xyx2-1650958972756)(D:\A_study\Vue\vue3_study_image\e4.png)]
1.5 让文本框自动获得焦点
当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的.focus() 方法即可。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KVthsqFC-1650958972757)(D:\A_study\Vue\vue3_study_image\e5.png)]
1.6 this.$nextTick(cb) 方法
组件的
$nextTick(cb)
方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的DOM 异步地重新渲染完成后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DsPmqtgA-1650958972757)(D:\A_study\Vue\vue3_study_image\e6.png)]
2. 动态组件
2.1 什么是动态组件
动态组件指的是动态切换组件的显示与隐藏。vue 提供了一个内置的 组件，专门用来实现组件
的动态渲染。
①
<component>
是组件的占位符
② 通过 is 属性动态指定要渲染的组件名称
③
<component is="要渲染的组件的名称"></component>
2.2 如何实现动态组件渲染
示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oyJRzluy-1650958972758)(D:\A_study\Vue\vue3_study_image\e7.png)]
2.3 使用 keep-alive 保持状态
默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的
<keep-alive>
组件保持动态组件的状态。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t94qdS0K-1650958972758)(D:\A_study\Vue\vue3_study_image\e8.png)]
3. 插槽
3.1 什么是插槽
插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽
可以把插槽认为是组件封装期间，为用户预留的内容的占位符。
3.2 体验插槽的基础用法
在封装组件时，可以通过 元素定义插槽，从而为用户预留内容占位符。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4IVXdMWw-1650958972759)(D:\A_study\Vue\vue3_study_image\e9.png)]
1. 没有预留插槽的内容会被丢弃
如果在封装组件时没有预留任何 插槽，则用户提供的任何自定义内容都会被丢弃。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eSSxyXtt-1650958972759)(D:\A_study\Vue\vue3_study_image\e10.png)]
2. 后备内容
封装组件时，可以为预留的 插槽提供后备内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bsrLZRR3-1650958972760)(D:\A_study\Vue\vue3_study_image\e11.png)]
3.3 具名插槽
在一个 元素上使用 v-slot :Header指令，可以缩写成#Header
如果在封装组件时需要预留多个插槽节点，则需要为每个
<slot>
插槽指定具体的 name 名称。这种带有具体名称的插槽叫做“具名插槽”。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SWTgj3Qr-1650958972760)(D:\A_study\Vue\vue3_study_image\e12.png)]
注意：没有指定 name 名称的插槽，会有隐含的名称叫做 “default”。
3.4 作用域插槽
在封装组件的过程中，可以为预留的
<slot>
插槽绑定 props 数据，这种带有 props 数据的
<slot>
叫做“作用域插槽”。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jvO5rRhP-1650958972761)(D:\A_study\Vue\vue3_study_image\e13.png)]
1. 解构作用域插槽的 Prop
作用域插槽对外提供的数据对象，可以使用解构赋值简化数据的接收过程。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ICfgD4OJ-1650958972761)(D:\A_study\Vue\vue3_study_image\e14.png)]
2. 声明作用域插槽
在封装 MyTable 组件的过程中，可以通过作用域插槽把表格每一行的数据传递给组件的使用者。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eYGAcV90-1650958972762)(D:\A_study\Vue\vue3_study_image\e15.png)]
3. 使用作用域插槽
在使用 MyTable 组件时，自定义单元格的渲染方式，并接收作用域插槽对外提供的数据。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xQSvtzxt-1650958972762)(D:\A_study\Vue\vue3_study_image\e16.png)]
4. 自定义指令
声明自定义指令在 directives 节点下
4.1 什么是自定义指令
vue 官方提供了 v-for、v-model、v-if 等常用的内置指令。除此之外 vue 还允许开发者自定义指令。
vue 中的自定义指令分为两类，分别是：
- 私有自定义指令
- 全局自定义指令
4.2 声明私有自定义指令的语法
在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yc4qM4XA-1650958972763)(D:\A_study\Vue\vue3_study_image\e17.png)]
4.3 使用自定义指令
在使用自定义指令时，需要加上 v- 前缀。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vphAqwYb-1650958972763)(D:\A_study\Vue\vue3_study_image\e18.png)]
4.4 声明全局自定义指令的语法
全局共享的自定义指令需要通过“单页面应用程序的实例对象”进行声明，示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WaFJ3spt-1650958972763)(D:\A_study\Vue\vue3_study_image\e19.png)]
4.5 updated 函数
mounted 函数只在元素第一次插入 DOM 时被调用，当 DOM 更新时 mounted 函数不会被触发。 updated 函数会在每次 DOM 更新完成后被调用。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UwHpEQ2a-1650958972764)(D:\A_study\Vue\vue3_study_image\e20.png)]
注意：在 vue2 的项目中使用自定义指令时，【 mounted -> bind 】【 updated -> update 】
4.6 函数简写
如果 mounted 和updated 函数中的逻辑完全相同，则可以简写成如下格式：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-siM5ixqF-1650958972764)(D:\A_study\Vue\vue3_study_image\e21.png)]
4.7 指令的参数值
在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值，示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MLvvwNv4-1650958972765)(D:\A_study\Vue\vue3_study_image\e22.png)]
5. 总结
① 能够知道如何使用 ref 引用 DOM 和组件实例
- 通过 ref 属性指定引用的名称、使用 this.$refs 访问引用实例
② 能够知道 $nextTick 的调用时机
- 组件的 DOM 更新之后，才执行 $nextTick 中的回调
③ 能够说出 keep-alive 元素的作用
- 保持动态组件的状态
④ 能够掌握插槽的基本用法
<slot>标签、具名插槽、作用域插槽、v-slot: 简写为 #
⑤ 能够知道如何自定义指令
- 私有自定义指令、全局自定义指令
路由
1. 前端路由的概念与原理
1.1 什么是路由
路由（英文：router）就是对应关系。路由分为两大类：
① 后端路由
② 前端路由
1.2 回顾：后端路由
后端路由指的是：请求方式、请求地址与 function 处理函数之间的对应关系。在 node.js 课程中，express 路由的基本用法如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sGr5YNpp-1650958972765)(D:\A_study\Vue\vue3_study_image\f1.png)]
1.3 SPA 与前端路由
SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。
结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！
1.4 什么是前端路由
通俗易懂的概念：Hash 地址与组件之间的对应关系。
1.5 前端路由的工作方式
① 用户点击了页面上的路由链接
② 导致了 URL 地址栏中的 Hash 值发生了变化
③ 前端路由监听了到 Hash 地址的变化
④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中
1.6 实现简易的前端路由
1. 步骤1
步骤1：导入并注册 MyHome、MyMovie、MyAbout 三个组件。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dXTTph3C-1650958972765)(D:\A_study\Vue\vue3_study_image\f2.png)]
2. 步骤2
步骤2：通过
<component>
标签的 is 属性，动态切换要显示的组件。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w4HkIYCY-1650958972766)(D:\A_study\Vue\vue3_study_image\f3.png)]
3. 步骤3
步骤3：在组件的结构中声明如下 3 个 链接，通过点击不同的 链接，切换浏览器地址栏中的 Hash 值：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WFIUTYSL-1650958972766)(D:\A_study\Vue\vue3_study_image\f4.png)]
4. 步骤4
步骤4：在 created 生命周期函数中监听浏览器地址栏中 Hash 地址的变化，动态切换要展示的组件的名称：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E59emDeo-1650958972766)(D:\A_study\Vue\vue3_study_image\f5.png)]
2. vue-router 的基本使用
2.1 什么是 vue-router
vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换
2.2 vue-router 的版本
vue-router 目前有 3.x 的版本和 4.x 的版本。其中：
- vue-router 3.x 只能结合 vue2 进行使用
- vue-router 4.x 只能结合 vue3 进行使用
vue-router 3.x 的官方文档地址：https://router.vuejs.org/zh/
vue-router 4.x 的官方文档地址：https://next.router.vuejs.org/
2.3 vue-router 4.x 的基本使用步骤
① 在项目中安装 vue-router
② 定义路由组件
③ 声明路由链接和占位符
④ 创建路由模块
⑤ 导入并挂载路由模块
1. 在项目中安装 vue-router
在 vue3 的项目中，只能安装并使用 vue-router 4.x。安装的命令如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kEbPO4QF-1650958972767)(D:\A_study\Vue\vue3_study_image\f6.png)]
2. 定义路由组件
在项目中定义 MyHome.vue、MyMovie.vue、MyAbout.vue 三个组件，将来要使用 vue-router 来控制它们的展示与切换：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ahpZoadj-1650958972767)(D:\A_study\Vue\vue3_study_image\f7.png)]
3. 声明路由链接和占位符
可以使用
<router-link>
标签来声明路由链接，并使用
<router-view>
标签来声明路由占位符。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YgYTyGhC-1650958972768)(D:\A_study\Vue\vue3_study_image\f8.png)]
4. 创建路由模块
在项目中创建 router.js 路由模块，在其中按照如下 4 个步骤创建并得到路由的实例对象：
① 从 vue-router 中按需导入两个方法
② 导入需要使用路由控制的组件
③ 创建路由实例对象
④ 向外共享路由实例对象
⑤ 在 main.js 中导入并挂载路由模块
2.4 从 vue-router 中按需导入两个方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SRFGWaDn-1650958972768)(D:\A_study\Vue\vue3_study_image\f9.png)]
2.5 导入需要使用路由控制的组件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XYkd9KLx-1650958972768)(D:\A_study\Vue\vue3_study_image\f10.png)]
2.6 创建路由实例对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UhxhV9Gp-1650958972769)(D:\A_study\Vue\vue3_study_image\f11.png)]
2.7 向外共享路由实例对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W9jhxd7w-1650958972769)(D:\A_study\Vue\vue3_study_image\f12.png)]
2.8 在 main.js 中导入并挂载路由模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-43G2rzuB-1650958972769)(D:\A_study\Vue\vue3_study_image\f13.png)]
3. vue-router 的高级用法
3.1 路由重定向
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vqlppz5M-1650958972770)(D:\A_study\Vue\vue3_study_image\f14.png)]
3.2 路由高亮
可以通过如下的两种方式，将激活的路由链接进行高亮显示：
① 使用默认的高亮 class 类
② 自定义路由高亮的 class 类
1. 默认的高亮 class 类
被激活的路由链接，默认会应用一个叫做 router-link-active 的类名。开发者可以使用此类名选择器，为激活的路由链接设置高亮的样式：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JRXgk6ew-1650958972770)(D:\A_study\Vue\vue3_study_image\f15.png)]
2. 自定义路由高亮的 class 类
在创建路由的实例对象时，开发者可以基于 linkActiveClass 属性，自定义路由链接被激活时所应用的类名：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DMbkIaN4-1650958972770)(D:\A_study\Vue\vue3_study_image\f16.png)]
3.3 嵌套路由
通过路由实现组件的嵌套展示，叫做嵌套路由。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WY27ZIGZ-1650958972771)(D:\A_study\Vue\vue3_study_image\f17.png)]
① 声明子路由链接和子路由占位符
② 在父路由规则中，通过 children 属性嵌套声明子路由规则
1. 声明子路由链接和子路由占位符
在 About.vue 组件中，声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PqiBpiCa-1650958972771)(D:\A_study\Vue\vue3_study_image\f18.png)]
2. 通过 children 属性声明子路由规则
注意：子路由规则的 path 不要以 / 开头！
在 router.js 路由模块中，导入需要的组件，并使用 children 属性声明子路由规则。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-svGfFsif-1650958972771)(D:\A_study\Vue\vue3_study_image\f19.png)]
3.4 动态路由匹配
1. 动态路由的概念
动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。在 vue-router 中使用英文的冒号
:
来定义路由的参数项。示例代码如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uwJHUmor-1650958972772)(D:\A_study\Vue\vue3_study_image\f20.png)]
2. $route.params 参数对象
通过动态路由匹配的方式渲染出来的组件中，可以使用 $route.params 对象访问到动态匹配的参数值。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bECEa3dO-1650958972772)(D:\A_study\Vue\vue3_study_image\f21.png)]
3. 使用 props 接收路由参数
为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kZjEpXx0-1650958972772)(D:\A_study\Vue\vue3_study_image\f22.png)]
3.5 编程式导航
通过调用 API 实现导航的方式，叫做编程式导航。与之对应的，通过点击链接实现导航的方式，叫做声明式导航。例如：
- 普通网页中点击 链接、vue 项目中点击 都属于声明式导航
- 普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航
1. vue-router 中的编程式导航 API
vue-router 提供了许多编程式导航的 API，其中最常用的两个 API 分别是：
① this.$router.push(‘hash 地址’)
- 跳转到指定 Hash 地址，从而展示对应的组件
② this.$router.go(数值 n)
- 实现导航历史的前进、后退
2. $router.push
调用 this.$router.push() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j0bGmeVd-1650958972773)(D:\A_study\Vue\vue3_study_image\f23.png)]
2. $router.go
调用 this.$router.go() 方法，可以在浏览历史中进行前进和后退。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qyIG0lNw-1650958972773)(D:\A_study\Vue\vue3_study_image\f24.png)]
3.6 命名路由
注意：命名路由的 name 值不能重复，必须保证唯一性！
通过 name 属性为路由规则定义名称的方式，叫做命名路由。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5gNd4t6q-1650958972773)(D:\A_study\Vue\vue3_study_image\f25.png)]
1. 使用命名路由实现声明式导航
为
<router-link>
标签动态绑定 to 属性的值，并通过 name 属性指定要跳转到的路由规则。期间还可以用params 属性指定跳转期间要携带的路由参数。示例代码 如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6DybnYC6-1650958972774)(D:\A_study\Vue\vue3_study_image\f26.png)]
2. 使用命名路由实现编程式导航
调用 push 函数期间指定一个配置对象，name 是要跳转到的路由规则、params 是携带的路由参数：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gnrwX8EA-1650958972774)(D:\A_study\Vue\vue3_study_image\f27.png)]
3.7 导航守卫
导航守卫可以控制路由的访问权限。示意图如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BZfDmspj-1650958972774)(D:\A_study\Vue\vue3_study_image\f28.png)]
1. 如何声明全局导航守卫
全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制。可以按照如下的方式定义全局导航守卫：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ahye9v6S-1650958972775)(D:\A_study\Vue\vue3_study_image\f29.png)]
2. 守卫方法的 3 个形参
全局导航守卫的守卫方法中接收 3 个形参，格式为：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AFgFPRSH-1650958972775)(D:\A_study\Vue\vue3_study_image\f30.png)]
注意：
① 在守卫方法中如果不声明 next 形参，则默认允许用户访问每一个路由！
② 在守卫方法中如果声明了 next 形参，则必须调用 next() 函数，否则不允许用户访问任何一个路由！
3. next 函数的 3 种调用方式
参考示意图，分析 next 函数的 3 种调用方式最终导致的结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SfyOVwC9-1650958972776)(D:\A_study\Vue\vue3_study_image\f31.png)]
直接放行：next()
强制其停留在当前页面：next(false)
强制其跳转到登录页面：next(‘/login’)
4. 结合 token 控制后台主页的访问权限
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fPbNd2zl-1650958972776)(D:\A_study\Vue\vue3_study_image\f32.png)]
4. 总结
① 能够知道如何在 vue 中配置路由
- createRouter、app.use(router)
② 能够知道如何使用嵌套路由
- 通过 children 属性进行路由嵌套、子路由的 hash 地址不要以 / 开头
③ 能够知道如何实现动态路由匹配
- 使用冒号声明参数项、this.$route.params、props: true
④ 能够知道如何使用编程式导航
this.$router.push、this.$router.go(-1)
⑤ 能够知道如何使用全局导航守卫
- 路由实例.beforeEach((to, from, next) => { })
VUE 基础 - 综合案例
1. vue-cli
1.1 什么是 vue-cli
vue-cli（俗称：vue 脚手架）是 vue 官方提供的、快速生成 vue 工程化项目的工具。
特点：
① 开箱即用
② 基于 webpack
③ 功能丰富且易于扩展
④ 支持创建 vue2 和 vue3 的项目
vue-cli 的中文官网首页：https://cli.vuejs.org/zh/
1.2 安装 vue-cli
vue-cli 是基于 Node.js 开发出来的工具，因此需要使用 npm 将它安装为全局可用的工具：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2iAb1jrc-1650958972777)(D:\A_study\Vue\vue3_study_image\g1.png)]
1. 解决 Windows PowerShell 不识别 vue 命令的问题
默认情况下，在PowerShell 中执行 vue --version 命令会提示如下的错误消息：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yj584ca4-1650958972777)(D:\A_study\Vue\vue3_study_image\g2.png)]
1.3 创建项目
vue-cli 提供了创建项目的两种方式：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tzKwinMA-1650958972777)(D:\A_study\Vue\vue3_study_image\g3.png)]
1.4 基于 vue ui 创建 vue 项目
1. 步骤1
在终端下运行 vue ui 命令，自动在浏览器中打开创建项目的可视化面板：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4STrv0AZ-1650958972778)(D:\A_study\Vue\vue3_study_image\g4.png)]
2. 步骤2
在详情页面填写项目名称：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x0wHfY7H-1650958972778)(D:\A_study\Vue\vue3_study_image\g5.png)]
4. 步骤3
在预设页面选择手动配置项目：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m9rvP8g1-1650958972778)(D:\A_study\Vue\vue3_study_image\g6.png)]
4. 步骤4
在功能页面勾选需要安装的功能（Choose Vue Version、Babel、CSS 预处理器、使用配置文件）：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oqIgz7Cx-1650958972779)(D:\A_study\Vue\vue3_study_image\g7.png)]
5. 步骤5
在配置页面勾选 vue 的版本和需要的预处理器：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hgt8eN75-1650958972779)(D:\A_study\Vue\vue3_study_image\g8.png)]
6. 步骤6
将刚才所有的配置保存为预设（模板），方便下一次创建项目时直接复用之前的配置：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4FDvLIMG-1650958972780)(D:\A_study\Vue\vue3_study_image\g9.png)]
7. 步骤7
创建项目并自动安装依赖包：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qAkUTx7Y-1650958972780)(D:\A_study\Vue\vue3_study_image\g10.png)]
8. vue ui 的本质
通过可视化的面板采集到用户的配置信息后，在后台基于命令行的方式自动初始化项目：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e3zM6Emk-1650958972780)(D:\A_study\Vue\vue3_study_image\g11.png)]
9. 项目创建完成后，自动进入项目仪表盘
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gmvROCTS-1650958972781)(D:\A_study\Vue\vue3_study_image\g12.png)]
1.5 基于命令行创建 vue 项目
步骤1：在终端下运行 vue create demo2 命令，基于交互式的命令行创建 vue 的项目：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jy2CaR17-1650958972781)(D:\A_study\Vue\vue3_study_image\g13.png)]
步骤2：选择要安装的功能：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FNNKGjvl-1650958972781)(D:\A_study\Vue\vue3_study_image\g14.png)]
步骤3：使用上下箭头选择 vue 的版本，并使用回车键确认选择：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KPPJcjGS-1650958972782)(D:\A_study\Vue\vue3_study_image\g15.png)]
步骤4：使用上下箭头选择要使用的 css 预处理器，并使用回车键确认选择：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hQ2J491Z-1650958972782)(D:\A_study\Vue\vue3_study_image\g16.png)]
步骤5：使用上下箭头选择如何存储插件的配置信息，并使用回车键确认选择：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ticpdF5P-1650958972782)(D:\A_study\Vue\vue3_study_image\g17.png)]
步骤6：是否将刚才的配置保存为预设：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DdZQvjxs-1650958972783)(D:\A_study\Vue\vue3_study_image\g18.png)]
步骤7：选择如何安装项目中的依赖包：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ofUxfLKW-1650958972783)(D:\A_study\Vue\vue3_study_image\g19.png)]
步骤8：开始创建项目并自动安装依赖包：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6p54hEaL-1650958972783)(D:\A_study\Vue\vue3_study_image\g20.png)]
步骤9：项目创建完成：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IVo3O5bi-1650958972784)(D:\A_study\Vue\vue3_study_image\g21.png)]
1.6 梳理 vue2 项目的基本结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vvg21lFc-1650958972784)(D:\A_study\Vue\vue3_study_image\g22.png)]
1.7 分析 main.js 中的主要代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pn2dZK7f-1650958972784)(D:\A_study\Vue\vue3_study_image\g23.png)]
1.8 在 vue2 的项目中使用路由
在 vue2 的项目中，只能安装并使用 3.x 版本的 vue-router。
版本 3 和版本 4 的路由最主要的区别：创建路由模块的方式不同！
1. 回顾：4.x 版本的路由如何创建路由模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hY7D4ttC-1650958972785)(D:\A_study\Vue\vue3_study_image\g24.png)]
2. 学习：3.x 版本的路由如何创建路由模块
步骤1：在 vue2 的项目中安装 3.x 版本的路由：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P0Gdsceo-1650958972785)(D:\A_study\Vue\vue3_study_image\g25.png)]
步骤2：在 src -> components 目录下，创建需要使用路由切换的组件：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NLT44iDE-1650958972785)(D:\A_study\Vue\vue3_study_image\g26.png)]
步骤3：在 src 目录下创建 router -> index.js 路由模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s7SP354s-1650958972786)(D:\A_study\Vue\vue3_study_image\g27.png)]
步骤4：在 main.js 中导入路由模块，并通过 router 属性进行挂载
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iAkwXDSK-1650958972786)(D:\A_study\Vue\vue3_study_image\g28.png)]
步骤5：在 App.vue 根组件中，使用 声明路由的占位符：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W7qb529i-1650958972787)(D:\A_study\Vue\vue3_study_image\g29.png)]
2. 组件库
2.1 什么是 vue 组件库
在实际开发中，前端开发者可以把自己封装的 .vue 组件整理、打包、并发布为 npm 的包，从而供其他人下载和使用。这种可以直接下载并在项目中使用的现成组件，就叫做 vue 组件库。
2.2 vue 组件库和 bootstrap 的区别
二者之间存在本质的区别：
- bootstrap 只提供了纯粹的原材料（ css 样式、HTML 结构以及 JS 特效），需要由开发者做进一步的组装和改造
- vue 组件库是遵循 vue 语法、高度定制的现成组件，开箱即用
2.3 最常用的 vue 组件库
① PC 端
- Element UI（https://element.eleme.cn/#/zh-CN）
- View UI（http://v1.iviewui.com/）
② 移动端
2.4 Element UI
Element UI 是饿了么前端团队开源的一套 PC 端 vue 组件库。支持在 vue2 和 vue3 的项目中使用：
- vue2 的项目使用旧版的 Element UI（https://element.eleme.cn/#/zh-CN）
- vue3 的项目使用新版的 Element Plus（https://element-plus.gitee.io/#/zh-CN）
1. 在 vue2 的项目中安装 element-ui
运行如下的终端命令
npm i element-ui -S
2. 引入 element-ui
开发者可以一次性完整引入所有的 element-ui 组件，或是根据需求，只按需引入用到的 element-ui 组件：
- 完整引入：操作简单，但是会额外引入一些用不到的组件，导致项目体积过大
- 按需引入：操作相对复杂一些，但是只会引入用到的组件，能起到优化项目体积的目的
3. 完整引入
在 main.js 中写入以下内容：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JAiHsbbM-1650958972787)(D:\A_study\Vue\vue3_study_image\g31.png)]
4. 按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
步骤1，安装 babel-plugin-component：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KuXNc92P-1650958972787)(D:\A_study\Vue\vue3_study_image\g32.png)]
步骤2，修改根目录下的 babel.config.js 配置文件，新增 plugins 节点如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IcsfSOFX-1650958972788)(D:\A_study\Vue\vue3_study_image\g33.png)]
步骤3，如果你只希望引入部分组件，比如 Button，那么需要在 main.js 中写入以下内容：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p9T4C8vM-1650958972788)(D:\A_study\Vue\vue3_study_image\g34.png)]
2.5 把组件的导入和注册封装为独立的模块
在 src 目录下新建 element-ui/index.js 模块，并声明如下的代码：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0bHXnQ8t-1650958972788)(D:\A_study\Vue\vue3_study_image\g35.png)]
3. axios 拦截器
3.1 回顾：在 vue3 的项目中全局配置 axios
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DAzTuC1c-1650958972789)(D:\A_study\Vue\vue3_study_image\g36.png)]
3.2 在 vue2 的项目中全局配置 axios
需要在 main.js 入口文件中，通过 Vue 构造函数的 prototype 原型对象全局配置 axios：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aGc2r6jV-1650958972789)(D:\A_study\Vue\vue3_study_image\g37.png)]
3.3 什么是拦截器
拦截器（英文：Interceptors）会在每次发起 ajax 请求和得到响应的时候自动被触发。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XKwZDwd7-1650958972789)(D:\A_study\Vue\vue3_study_image\g38.png)]
3.4 配置请求拦截器
通过 axios.interceptors.request.use(成功的回调, 失败的回调) 可以配置请求拦截器。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XCQejQEX-1650958972790)(D:\A_study\Vue\vue3_study_image\g39.png)]
注意：失败的回调函数可以被省略！
1. 请求拦截器 – Token 认证
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sMA5Or86-1650958972790)(D:\A_study\Vue\vue3_study_image\g40.png)]
2. 请求拦截器 – 展示 Loading 效果
借助于 element ui 提供的 Loading 效果组件（https://element.eleme.cn/#/zh-CN/component/loading）可以方便的实现 Loading 效果的展示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ODOTFHT-1650958972791)(D:\A_study\Vue\vue3_study_image\g41.png)]
3.5 配置响应拦截器
通过 axios.interceptors.response.use(成功的回调, 失败的回调) 可以配置响应拦截器。示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l9u2k76b-1650958972791)(D:\A_study\Vue\vue3_study_image\g42.png)]
注意：失败的回调函数可以被省略！
1. 响应拦截器 – 关闭 Loading 效果
调用 Loading 实例提供的 close() 方法即可关闭 Loading 效果，示例代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-REybLtIC-1650958972791)(D:\A_study\Vue\vue3_study_image\g43.png)]
4. proxy 跨域代理
4.1 回顾：接口的跨域问题
vue 项目运行的地址：http://localhost:8080/
API 接口运行的地址：https://www.escook.cn/api/users
由于当前的 API 接口没有开启 CORS 跨域资源共享，因此默认情况下，上面的接口无法请求成功！
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-InLkpW9k-1650958972792)(D:\A_study\Vue\vue3_study_image\g44.png)]
4.2 通过代理解决接口的跨域问题
通过 vue-cli 创建的项目在遇到接口跨域问题时，可以通过代理的方式来解决：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ESa5CEwR-1650958972792)(D:\A_study\Vue\vue3_study_image\g45.png)]
① 把 axios 的请求根路径设置为 vue 项目的运行地址（接口请求不再跨域）
② vue 项目发现请求的接口不存在，把请求转交给 proxy 代理
③ 代理把请求根路径替换为 devServer.proxy 属性的值，发起真正的数据请求
④ 代理把请求到的数据，转发给 axios
4.3 在项目中配置 proxy 代理
步骤1，在 main.js 入口文件中，把 axios 的请求根路径改造为当前 web 项目的根路径：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cR7AiVkq-1650958972792)(D:\A_study\Vue\vue3_study_image\g46.png)]
步骤2，在项目根目录下创建 vue.config.js 的配置文件，并声明如下的配置：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BTHBdvsM-1650958972793)(D:\A_study\Vue\vue3_study_image\g47.png)]
注意：
① devServer.proxy 提供的代理功能，仅在开发调试阶段生效
② 项目上线发布时，依旧需要 API 接口服务器开启 CORS 跨域资源共享
5. 总结
① 能够知道如何使用 vue-cli 创建项目
- vue ui 、vue create 项目名称
② 能够知道如何在项目中安装和配置 element-ui
- 完整引入、按需引入、参考官方文档进行配置
③ 能够知道 element-ui 中常见组件的用法
- Table 表格、Form 表单、Dialog 对话框、Message 消息、MessageBox 弹框
④ 能够知道如何使用 axios 拦截器
- axios.interceptors.request.use()、axios.interceptors.response.use()
⑤ 能够知道如何配置 proxy 代理
- 修改请求根路径、vue.config.js、devServer.proxy
在 vue3 的项目中全局配置 axios
[外链图片转存中…(img-DAzTuC1c-1650958972789)]
3.2 在 vue2 的项目中全局配置 axios
需要在 main.js 入口文件中，通过 Vue 构造函数的 prototype 原型对象全局配置 axios：
[外链图片转存中…(img-aGc2r6jV-1650958972789)]
3.3 什么是拦截器
拦截器（英文：Interceptors）会在每次发起 ajax 请求和得到响应的时候自动被触发。
[外链图片转存中…(img-XKwZDwd7-1650958972789)]
3.4 配置请求拦截器
通过 axios.interceptors.request.use(成功的回调, 失败的回调) 可以配置请求拦截器。示例代码如下：
[外链图片转存中…(img-XCQejQEX-1650958972790)]
注意：失败的回调函数可以被省略！
1. 请求拦截器 – Token 认证
[外链图片转存中…(img-sMA5Or86-1650958972790)]
2. 请求拦截器 – 展示 Loading 效果
借助于 element ui 提供的 Loading 效果组件（https://element.eleme.cn/#/zh-CN/component/loading）可以方便的实现 Loading 效果的展示：
[外链图片转存中…(img-9ODOTFHT-1650958972791)]
3.5 配置响应拦截器
通过 axios.interceptors.response.use(成功的回调, 失败的回调) 可以配置响应拦截器。示例代码如下：
[外链图片转存中…(img-l9u2k76b-1650958972791)]
注意：失败的回调函数可以被省略！
1. 响应拦截器 – 关闭 Loading 效果
调用 Loading 实例提供的 close() 方法即可关闭 Loading 效果，示例代码如下：
[外链图片转存中…(img-REybLtIC-1650958972791)]
4. proxy 跨域代理
4.1 回顾：接口的跨域问题
vue 项目运行的地址：http://localhost:8080/
API 接口运行的地址：https://www.escook.cn/api/users
由于当前的 API 接口没有开启 CORS 跨域资源共享，因此默认情况下，上面的接口无法请求成功！
[外链图片转存中…(img-InLkpW9k-1650958972792)]
4.2 通过代理解决接口的跨域问题
通过 vue-cli 创建的项目在遇到接口跨域问题时，可以通过代理的方式来解决：
[外链图片转存中…(img-ESa5CEwR-1650958972792)]
① 把 axios 的请求根路径设置为 vue 项目的运行地址（接口请求不再跨域）
② vue 项目发现请求的接口不存在，把请求转交给 proxy 代理
③ 代理把请求根路径替换为 devServer.proxy 属性的值，发起真正的数据请求
④ 代理把请求到的数据，转发给 axios
4.3 在项目中配置 proxy 代理
步骤1，在 main.js 入口文件中，把 axios 的请求根路径改造为当前 web 项目的根路径：
[外链图片转存中…(img-cR7AiVkq-1650958972792)]
步骤2，在项目根目录下创建 vue.config.js 的配置文件，并声明如下的配置：
[外链图片转存中…(img-BTHBdvsM-1650958972793)]
注意：
① devServer.proxy 提供的代理功能，仅在开发调试阶段生效
② 项目上线发布时，依旧需要 API 接口服务器开启 CORS 跨域资源共享
5. 总结
① 能够知道如何使用 vue-cli 创建项目
- vue ui 、vue create 项目名称
② 能够知道如何在项目中安装和配置 element-ui
- 完整引入、按需引入、参考官方文档进行配置
③ 能够知道 element-ui 中常见组件的用法
- Table 表格、Form 表单、Dialog 对话框、Message 消息、MessageBox 弹框
④ 能够知道如何使用 axios 拦截器
- axios.interceptors.request.use()、axios.interceptors.response.use()
⑤ 能够知道如何配置 proxy 代理
- 修改请求根路径、vue.config.js、devServer.proxy
版权归原作者 龙槑 所有， 如有侵权，请联系我们删除。