无意间又一次刷到了尤大介绍 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(危)。(尤大太肝了
话不多说,直接开始。
1yarn create vite-app vue3-demo-vite
2cd vue3-demo-vite
3code .
Copy

改写 TSX

打开项目之后,默认使用的是 js ,但是没关系,直接安装 ts
1yarn add -D typescript
Copy
无需其他配置。直接删除所有 vue 文件,新建一个 App.tsx
声明一个组件的方式是使用 defineComponent 方法,目前还不知道是否支持 class component,但是可以使用 vue-class-component 库。这里我们就是用原生支持的函数式写法。有点类似于 React 的 FC。

一个简单的累加器

单击按钮,使得数据+ 1.
1import { defineComponent, ref } from 'vue'
2import style from './index.module.css'
3export default defineComponent({
4  name: 'Counter',
5  setup() {
6    const count = ref(0)
7
8    return () => (
9      <>
10        <button onClick={(_) => count.value++} class={style['btn']}>
11          Add
12        </button>
13        <p>{count.value}</p>
14      </>
15    )
16  },
17})
Copy
在 tsx 方面与 React 不同的是 classclassName,input 的 onChangeonInput 。细心的你可能也会发现,tsx 方面 vue 3 几乎与 preact 一致。
注意
  1. React 中的 onInputonChange 有什么不同?没有不同,是一样的。但是原生事件中并不一致。
  2. vite 中使用 Fragment,无需引入,如果手动引入将会报错。Fragment is already declared.,或者使用 <> </>语法糖即可。
  3. vue 3 中暂不支持子组件中需要 props 传递,同时组件使用 Fragment 包裹的情况。此时会报错。rawChildren.filter is not a function
  4. vite 支持 css module,但是没有声明文件,IDE 可能会报错。

Props 类型检测与完美的 TS 提示

终于,组件的 Props 能被 TS 识别了!!有点激动。
举个例子
1import { defineComponent } from 'vue'
2
3export default defineComponent({
4  name: 'bar',
5  props: {
6    name: {
7      type: String,
8      required: true,
9    },
10  },
11  setup(props) {
12    return () => <div>{props.name}</div>
13  },
14})
Copy
这是一个子组件,接收一个 name,并且显示该 name
在父组件引入。
!自动导入!!!
熟悉的味道来了,Auto Import 嗒。你说写 ts 的目的是啥?
不需要像 React 那样写 props 的 interface 了,有点小激动。

Ref

vue 3 中的 ref 对获取 HTMLElement ref 的方法与 React 基本一致。
1import { defineComponent, ref, watch, onMounted } from 'vue'
2export default defineComponent({
3  name: 'Image',
4  setup() {
5    const imageRef = ref<HTMLImageElement>() // 此时为 null
6    // 挂载后获取到其Ref
7    onMounted(() => {
8      console.log(imageRef.value)
9      // do anything...
10    })
11
12    // 或者
13    watch(
14      () => imageRef.value, // 当 img ref 传递到 imageRef 时,触发,获取到其值
15      (val) => {
16        console.log(val) // 输出获取到的值
17      },
18    )
19
20    return () => {
21      return (
22        <img
23          ref={imageRef}
24          src={
25            'https://avatars0.githubusercontent.com/u/41265413?s=460&u=8c14b9682794c353995029327f439d736571426e&v=4'
26          }
27        />
28      )
29    }
30  },
31})
Copy

Lifecircle

vue 3 中生命周期全部为 hook 的形式,也就是可以多次叠加触发。一个生命周期钩子可以定义多次,按顺序执行。
1import { defineComponent, onMounted, ref } from 'vue'
2
3export default defineComponent({
4  name: 'lifecircle',
5  setup() {
6    const message = ref('')
7    onMounted(() => {
8      message.value = message.value + '我触发了一次'
9    })
10    onMounted(() => {
11      message.value = message.value + '\n我又触发了一次'
12    })
13
14    return () => (
15      <>
16        this is lifecircle component.
17        <pre>{message.value}</pre>
18      </>
19    )
20  },
21})
Copy

计算属性

通过 computed 方法包装获得计算属性。
1import { defineComponent, ref, computed } from 'vue'
2import style from './index.module.css'
3export default defineComponent({
4  name: 'Counter',
5  setup() {
6    const count = ref(0)
7    const double = computed(() => count.value * 2) // 包装一个计算属性,value 为计算的值
8    return () => (
9      <>
10        <button onClick={(_) => count.value++} class={style['btn']}>
11          Add
12        </button>
13        <p>{count.value}</p>
14        <p>doubled: {double.value}</p>
15      </>
16    )
17  },
18})
Copy

亲亲留个评论再走呗

正在加载评论区...