vue-next+typescript 初体验

Innei

发布于 2021-12-28 11:19:28

7520

文章被收录于专栏：静之森静之森

无意间又一次刷到了尤大介绍 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（危）。（尤大太肝了

话不多说，直接开始。

bash

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.

tsx

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 一致。

注意

React 中的 onInput 和 onChange 有什么不同？没有不同，是一样的。但是原生事件中并不一致。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 识别了！！有点激动。

举个例子

tsx

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 基本一致。

tsx

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 的形式，也就是可以多次叠加触发。一个生命周期钩子可以定义多次，按顺序执行。

tsx

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 方法包装获得计算属性。

tsx

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})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-06-05，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

react

android