VUE3/TS/TSX入门手册指北
原创
VUE3入门手册
vue3入门
首先 查看 官方文档：https://cn.vuejs.org/guide/quick-start.html
如果有vue2基础，速成课程：https://www.zhoulujun.co/learning-vue3/component.html（官方文档 还是建议 翻一遍）
VUE3深入
首先看源码是个不错的学习手段，限于时间，可以看精略版：https://www.zhoulujun.co/vue3-docs/index.html
从vue2到vue3之路
vue2升级vue3项目经验：?https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/
typescript入门手册：
对于没有CS基础（如JAVA、C#）的同学，建议先看官方手册：
https://www.typescriptlang.org/docs/handbook/intro.html
https://www.tslang.cn/docs/handbook/basic-types.html（中文
其他的入门教程，大同小异，比如：https://ts.xcatliu.com/
对于已入门的同学，需要关注TS这个几个关键点：
- 内置类型：《TS数据类型(0)：一些需要注意的地方笔记+typescript 内置类型》
- 联合类型、枚举：TS数据类型：类型别名/联合类型/字面量类型/类型推论等纲要、联合枚举类型：从C语言看枚举与联合类型到TypeScript/Python
- 装饰器：《Typescript装饰器Decorators浅析》、从java注解漫谈到typescript装饰器——注解与装饰器
- 泛型：《从java泛型来聊typescript泛型变量和泛型》
图书推荐：
TSX入门手册
.jsx是javascript文件并表明使用了JSX语法。
.tsx表明是typescript文件并使用了JSX语法。
JSX 可以更好的描述 UI 应该呈现出它应有交互的本质形式。JSX 看起来有点类似模版语言，但它具有 JavaScript 的全部功能。
JSX在React中使用给我们带来了很大的便利，而TSX，弥补了JSX缺乏类型系统、类型校验等弊端，大大降低了我们代码出错的概率。
如何学习JSX
先看官方文档：
- https://zh-hans.reactjs.org/docs/introducing-jsx.html
- https://zh-hans.reactjs.org/docs/jsx-in-depth.html
VUE3+TSX
Vue一直都是支持JSX语法的，3.0对TypeScript的支持又非常好，所以我开始尝试用Vue + TSX来做开发。
Vue 3.0相比2.x有一些变化，不能再使用原来的vue-jsx插件。
Vue 3.0也提供了一个对应React.createElement的方法h。但是这个h方法又和vue 2.0以及React都有一些不同。
例如这样一段代码：
<div?class={['foo',?'bar']}?style={{?margin:?'10px'?}}?id="foo"?onClick={foo}?/>在vue2.0中会转换成这样：
h('div',?{
??class:?['foo',?'bar'],
??style:?{?margin:?'10px'?}
??attrs:?{?id:?'foo'?},
??on:?{?click:?foo?}
})可以看到vue会将传入的属性做一个分类，会分为class、style、attrs、on等不同部分。这样做非常繁琐，也不好处理。
在vue 3.0中跟react更加相似，会转成这样：
h('div',?{
??class:?['foo',?'bar'],
??style:?{?margin:?'10px'?}
??id:?'foo',
??onClick:?foo
})基本上是传入什么就是什么，没有做额外的处理。
当然和React.createElement相比也有一些区别，例如：
- 子节点不会作为以children这个名字在props中传入，而是通过slots去取，这个下文会做说明。
- 多个子节点是以数组的形式传入，而不是像React那样作为分开的参数
案例代码：
https://github.com/TencentBlueKing/bkui-vue3
https://github.com/Tencent/tdesign-vue-next
JavaScript基础加强：
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。