无意间又一次刷到了尤大介绍 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 不同的是 class 和 className，input 的 onChange 和 onInput 。细心的你可能也会发现，tsx 方面 vue 3 几乎与 preact 一致。
注意
  1. React 中的 onInput 和 onChange 有什么不同？没有不同，是一样的。但是原生事件中并不一致。
    in-react-whats-the-difference-between-onchange-and-oninput
    https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput
  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

文章标题:

文章作者:

文章链接: [复制]

最后修改时间:

商业转载请联系站长获得授权，非商业转载请注明本文出处及文章链接，未经站长允许不得对文章文字内容进行修改演绎。
本文采用创作共用保留署名-非商业-禁止演绎4.0国际许可证

亲亲留个评论再走呗

正在加载评论区...