VUE3/TS/TSX入门手册指北

我心飞翔 分类:vue

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这个几个关键点:

图书推荐:

VUE3/TS/TSX入门手册指北

TSX入门手册

.jsx是javascript文件并表明使用了JSX语法。

.tsx表明是typescript文件并使用了JSX语法。

JSX 可以更好的描述 UI 应该呈现出它应有交互的本质形式。JSX 看起来有点类似模版语言,但它具有 JavaScript 的全部功能。

JSX在React中使用给我们带来了很大的便利,而TSX,弥补了JSX缺乏类型系统、类型校验等弊端,大大降低了我们代码出错的概率

如何学习JSX

先看官方文档:

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基础加强:

https://www.zhoulujun.co/javascript-history/

https://www.zhoulujun.cn/html/webfront/ECMAScript/js6/

回复

我来回复
  • 暂无回复内容