这篇文章上次修改于 2 个月前,可能其部分内容已经发生变化,如有疑问可询问作者。
无意间又一次刷到了尤大介绍 Vue 3 的文章,这次决定试一下 Vue 3 的 TypeScript 支持到底如何,不管别人说什么,只有自己用的舒服才是真的舒服。Vue 2 可是因为 ts 的缘故被喷的很惨,来看看 Vue 3 如何吧。
值得注意的是,编写该篇文章时,vue 3 仍处于 beta 阶段,版本号为beta.14
,代码可能有变动,请关注官方和 RFC
准备工作
注意
不要使用 vue-cli 配合 vue-cli-plugin-vue-next 来建立初始项目,该模板存在众多 bug。我遇到的问题有:
$createElement is not defined
h is not defined
h is not function
总之无法使用 tsx,没有了 tsx 就没有灵魂了呀,这哪成啊。
使用 vite 来构建项目,官方提供了 create-vite-app 脚手架来快速构建一个新的 vue3 项目。同时也提供了 react、 react-ts、preact 的模板,全都是 out of box。感觉比得上 parcel(危)。(尤大太肝了
话不多说,直接开始。
改写 TSX
打开项目之后,默认使用的是 js ,但是没关系,直接安装 ts
无需其他配置。直接删除所有 vue 文件,新建一个
App.tsx
声明一个组件的方式是使用
defineComponent
方法,目前还不知道是否支持 class component,但是可以使用 vue-class-component
库。这里我们就是用原生支持的函数式写法。有点类似于 React 的 FC。一个简单的累加器
单击按钮,使得数据+ 1.
在 tsx 方面与 React 不同的是
class
和 className
,input 的 onChange
和 onInput
。细心的你可能也会发现,tsx 方面 vue 3 几乎与 preact 一致。注意
- React 中的
onInput
和onChange
有什么不同?没有不同,是一样的。但是原生事件中并不一致。in-react-whats-the-difference-between-onchange-and-oninputhttps://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput - vite 中使用 Fragment,无需引入,如果手动引入将会报错。
Fragment is already declared.
,或者使用<> </>
语法糖即可。 - vue 3 中暂不支持子组件中需要 props 传递,同时组件使用 Fragment 包裹的情况。此时会报错。
rawChildren.filter is not a function
- vite 支持 css module,但是没有声明文件,IDE 可能会报错。
Props 类型检测与完美的 TS 提示
终于,组件的 Props 能被 TS 识别了!!有点激动。
举个例子
这是一个子组件,接收一个
name
,并且显示该 name
在父组件引入。

熟悉的味道来了,Auto Import 嗒。你说写 ts 的目的是啥?

不需要像 React 那样写 props 的 interface 了,有点小激动。
Ref
vue 3 中的
ref
对获取 HTMLElement ref 的方法与 React 基本一致。Lifecircle
vue 3 中生命周期全部为 hook 的形式,也就是可以多次叠加触发。一个生命周期钩子可以定义多次,按顺序执行。

计算属性
通过
computed
方法包装获得计算属性。文章标题:
文章作者:
文章链接: [复制]
最后修改时间:
商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,未经站长允许不得对文章文字内容进行修改演绎。
本文采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
亲亲留个评论再走呗
正在加载评论区...