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

話不多說，直接開始。

yarn create vite-app vue3-demo-vite cd vue3-demo-vite code .

改寫 TSX

打開項目之后，默認使用的是 js ，但是沒關系，直接安裝 ts

yarn add -D typescript

無需其他配置。直接刪除所有 vue 文件，新建一個 App.tsx

聲明一個組件的方式是使用 defineComponent 方法，目前還不知道是否支持 class component，但是可以使用 vue-class-component 庫。這里我們就是用原生支持的函數式寫法。有點類似于 React 的 FC。

一個簡單的累加器

單擊按鈕，使得數據＋ 1.

import { defineComponent, ref } from 'vue' import style from './index.module.css' export default defineComponent({name: 'Counter',setup() {const count = ref(0)return () => (<><button onClick={(_) => count.value++} class={style['btn']}>Add</button><p>{count.value}</p></>)}, })

在 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 識別了！！有點激動。

舉個例子

import { defineComponent } from 'vue'export default defineComponent({name: 'bar',props: {name: {type: String,required: true,},},setup(props) {return () => <div>{props.name}</div>}, })

這是一個子組件，接收一個 name，并且顯示該 name

在父組件引入。

沒有圖片，被吃掉啦

熟悉的味道來了，Auto Import 嗒。你說寫 ts 的目的是啥？

沒有圖片，被吃掉啦

不需要像 React 那樣寫 props 的 interface 了，有點小激動。

Ref

vue 3 中的 ref 對獲取 HTMLElement ref 的方法與 React 基本一致。

import { defineComponent, ref, watch, onMounted } from 'vue' export default defineComponent({name: 'Image',setup() {const imageRef = ref<HTMLImageElement>() // 此時為 null// 掛載后獲取到其RefonMounted(() => {console.log(imageRef.value)// do anything...})// 或者watch(() => imageRef.value, // 當 img ref 傳遞到 imageRef 時，觸發，獲取到其值(val) => {console.log(val) // 輸出獲取到的值},)return () => {return (<imgref={imageRef}src={'https://avatars0.githubusercontent.com/u/41265413?s=460&u=8c14b9682794c353995029327f439d736571426e&v=4'}/>)}}, })

Lifecircle

vue 3 中生命周期全部為 hook 的形式，也就是可以多次疊加觸發。一個生命周期鉤子可以定義多次，按順序執行。

import { defineComponent, onMounted, ref } from 'vue'export default defineComponent({name: 'lifecircle',setup() {const message = ref('')onMounted(() => {message.value = message.value + '我觸發了一次'})onMounted(() => {message.value = message.value + 'n我又觸發了一次'})return () => (<>this is lifecircle component.<pre>{message.value}</pre></>)}, })沒有圖片，被吃掉啦

計算屬性

通過 computed 方法包裝獲得計算屬性。

import { defineComponent, ref, computed } from 'vue' import style from './index.module.css' export default defineComponent({name: 'Counter',setup() {const count = ref(0)const double = computed(() => count.value * 2) // 包裝一個計算屬性，value 為計算的值return () => (<><button onClick={(_) => count.value++} class={style['btn']}>Add</button><p>{count.value}</p><p>doubled: {double.value}</p></>)}, })

文章標題: vue-next+typescript 初體驗

文章鏈接: https://innei.ren/posts/learning-process/vue-next-with-vite [復制]

最后修改時間: 2020年06月05日 13:38

總結

以上是生活随笔為你收集整理的vue create()获取ref_vue-next+typescript 初体验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。