为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第14天 Vue3 +...

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

2022.11.13 21:08 55浏览

第一模块:

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

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

讲师姓名:张轩


第二模块:

内容概述:

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


第三模块:

学习心得:

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

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

监听一个值:

https://img3.sycdn.imooc.com/6370eb3200016c6605510178.jpg


监听多个值:

spacer.gifhttps://img1.sycdn.imooc.com/6370eb38000175ee07010129.jpg

https://img1.sycdn.imooc.com/6370eb4b00015ec612810409.jpg


3-11 模块化 追踪鼠标

模块化有两层意思:

  • 组件模块化(模块文件中有JS代码和template模板代码)

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


spacer.gifhttps://img1.sycdn.imooc.com/6370eb5c0001a12f08170527.jpg

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

spacer.gifhttps://img1.sycdn.imooc.com/6370eb640001c57d08140565.jpg


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


3-12 模块化 axios插件

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

fetch:取来


axios简介:

spacer.gifhttps://img1.sycdn.imooc.com/6370eb6e00019b6505210426.jpg

eg:

spacer.gifhttps://img1.sycdn.imooc.com/6370eb9300012e1b04840705.jpg


3-13 模块化 泛型改造

spacer.gifhttps://img1.sycdn.imooc.com/6370eb9a000169a005270493.jpg


补充:

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的常见错误:

spacer.gifhttps://img2.sycdn.imooc.com/6370ec170001c45604440233.jpg

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

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


2.2三大框架的支持

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

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

spacer.gifhttps://img4.sycdn.imooc.com/6370ec0c00013ad706550102.jpg

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

所以:该学习TypeScript了


2.3兼容javaScript的灵活性

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

spacer.gifhttps://img4.sycdn.imooc.com/6370ebf40001eb0a05920149.jpg


小结:

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


第四模块:

学习截图:

https://img1.sycdn.imooc.com/6370ea870001e04e07710171.jpg

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
3
获赞与收藏
1

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消