【金秋打卡】第14天 Vue3 + Typescript 从0到1开发通用基础组件 4

第一模块：

课程名称：Vue3 + Typescript 从0到1开发通用基础组件

章节名称：3-10 ~ 3-13

讲师姓名：张轩

第二模块：

内容概述：

3-10 ~ 3-13 小节主要讲解了watch函数，vue3下的鼠标追踪以及泛型

第三模块：

学习心得：

3-10 watch函数：监控响应式数据值的变化

副作用：数据变化导致页面发生变化之外的变化就是副作用

监听一个值：

监听多个值：

3-11 模块化 追踪鼠标

模块化有两层意思：

• 组件模块化（模块文件中有JS代码和template模板代码）

• 通用逻辑模块化（模块文件中只有JS代码）

将上面的代码抽离成一个模块文件，这个模块文件只有JS逻辑，不存在template模板：

vue3中可以更优雅的将【通用的逻辑】抽成一个模块文件，这个文件中只有JS代码没有template模板。

3-12 模块化 axios插件

XHR：请求响应的完全上下文

fetch：取来

axios简介：

eg：

3-13 模块化 泛型改造

补充：

1.1TypeScript简介

• TypeScript 是 JavaScript 的超集，它可以编译成纯 JavaScript。

• TypeScript 基于 ECMAScript 标准进行拓展，支持 ECMAScript 未来提案中的特性，比如装饰器、异步功能等。

• TypeScript 编译的 JavaScript 可以在任何浏览器运行，TypeScript 编译工具可以运行在任何操作系统上。

• TypeScript 起源于开发较大规模 JavaScript 应用程序的需求。由微软在2012年发布了首个公开版本。

1.2ECMAScript

ECMA International: 一个制定技术标准的组织。

ECMA-262：由 ECMA International 发布。它包含了脚本语言的标准。

ECMAScript: 由 ECMA International 依据 ECMA-262 和 ECMA-402 规范，进一步约束出的脚本语言。

JavaScript: 通用脚本编程语言，它遵循了 ECMAScript 标准。 换句话说，JavaScript 是 ECMAScript 的方言。

所以：

 ECMA International是定标准的组织；

 ECMA-262 和 ECMA-402是【 ECMA International】定出来的标准；

ECMAScript是依据【ECMA-262 和 ECMA-402】基于javaScript约束出来的脚本语言

javaScript是原生的js语言

TypeScript是对ECMAScript语言的进一步【扩展】，支持了【支持 ECMAScript 未来提案中的特性】

1.3javaScript版本

注意： 说 JavaScript 的版本，实际上就是说它实现了 ECMAScript 标准的哪个版本

所以：javaScript的版本就是ECMAScript的版本

2.为什么是TS

2.1静态类型

首先来看一些javaScript的常见错误：

可以发现，这些错误都很初级，但是都很经常发生，这是因为： JavaScript 只会在 运行时 才去做数据类型检查，而 TypeScript 作为静态类型语言，其数据类型是在 编译期间 确定的，用TS编写代码的时候要明确变量的数据类型。

使用 TypeScript 后，这些低级错误将不再发生。

2.2三大框架的支持

学习一门新技术会关心它的生命力持久力，如果这门技术在较短时间内就要被淘汰，那花费大量的时间学习也是不划算的。

TypeScript 能够保持长久生命力的一个重要原因是——前端3大框架的支持。

从国内的氛围来看，由前端三大框架引领的 TypeScript 热潮已经涌来，很多招聘要求上也都有了 TypeScript 的身影。

所以：该学习TypeScript了

2.3兼容javaScript的灵活性

TS相比于JS多了【严谨性】，但同时也保留了【灵活性】，TS非常包容：

小结：

TS已经是当前大前端技术的重要一环了！

第四模块：

学习截图：