本文将介绍如何在 Vue 3 中应用 tsx
首先答复两个问题:
Why Vue 3
在 Vue 2 中,组件相干的逻辑都被写在一个文件中,常常会呈现一个组件几千行代码,十分难以保护;而且一个性能的相干代码通常会扩散写在 data
methods
created
等各个选项中,想要复用一个性能也是比拟艰难的。而 Vue 3 的组合式 API 正是为了解决这个问题。
Why tsx
Vue 中的组件是一个黑盒,你不晓得他的内部结构(属性和事件),只能通过文档甚至浏览源码来理解,这样是很消耗工夫的。而在 tsx 中,在编写代码时就能够取得代码提醒,组件的内部结构能够高深莫测,且具备代码约束力(当你编写了谬误的代码时会取得一个报错),这样是能够极大的进步代码编写效率,缩小低级谬误呈现。
组件的类型申明
Props
ts 会从 vue 组件的 props
申明中推断属性的类型,以下是一些根本的类型推断:
- String → string
- Number → number
- Boolean → boolean
- Array → unknown[]
- Object → Record<string, any>
- Date → string
- Function → Function
- Symbol → symbol
你能够通过 PropType
来进行更加准确的类型申明,倡议对所有的 Array
Object
Function
都进行申明
import {defineComponent, PropType} from 'vue'
export default defineComponent({
props: {
title: String,
values: {type: Array as PropType<number[]>,
required: true,
},
data: Object as PropType<{id: number, name: string}>,
onClick: Function as PropType<(id: number) => void>
}
})
属性默认是可选的,在下面例子中的 title
默认会失去一个 string | undefined
的类型。如果你申明了required: true
,他的类型就会变成string
。
有一些第三方组件可能会短少类型申明,这会导致 typescript 类型查看谬误*** 属性并不存在
,这种状况倡议应用属性解构,避开 typescript 类型查看
// Property 'onClick' does not exist on type ...
<ElButton onClick={onClickBtn}></Elbutton>
// 应用属性解构
<ElButton {...{onClick: onClickBtn}}></Elbutton>
Events
Events 实际上是 function props
的语法糖,@click="myCallback"
等价于 onClick={myCallback}
。 强烈建议防止应用Event
,而应用与之等效的办法属性,这样你会取得更好的类型提醒。
defineComponent({
emits: {
// event runtime validation
'play': (value: string) => {return true},
'rest-time': () => true},
setup(props, {emit}) {onMounted(() => {emit('play', 'game')
emit('rest-time')
})
}
})
<MyComponent onPlay={...} onRest-time={...} />
等价于
defineComponent({
props: {onPlay: Function as PropType<(value: string) => void>,
'onRest-time': Function as PropType<() => void>,},
setup(props) {onMounted(() => {props.onPlay('game')
props['onRest-time']()})
}
})
<MyComponent onPlay={...} onRest-time={...} />
TSX 语法
你能够持续应用 template 模板,不过咱们更倡议你应用 tsx 模板。
<template>
<div>contents</div>
</template>
<script lang="tsx">
defineComponent({setup(props) {
return {// ...}
}
})
</script>
或者
<script lang="tsx">
defineComponent({setup(props) {return () => (<div>contents</div>)
}
})
</script>
Attributes / Props
// template
<input type="email" :placeholder="placeholderText" />
// tsx
<input type="email" placeholder={placeholderText} />
Directives
v-model
// template
<input v-model="val" />
<input v-model:name="val">
<input v-model.trim="val">
<input v-model:name.trim="val">
// tsx
<input v-model={val} />
<input v-model={[val, 'name']} />
<input v-model={[val, ['trim']]} />
<input v-model={[val, 'name', ['trim']]} />
// bind ref value
<input v-model={valueRef.value} />
v-models
// template
<A v-model="foo" v-model:bar="bar" />
// tsx
<A v-models={[[foo], [bar, "bar"]]} />
slot
const A = (props, { slots}) => (
<>
<h1>{slots.default ? slots.default() : 'foo' }</h1>
<h2>{slots.bar && slots.bar() }</h2>
</>
);
const App = {setup() {
const slots = {default: () => <div>A</div>,
bar: () => <span>B</span>,};
return () => <A v-slots={slots} />;
},
};
Hooks
Hooks 是从 React 借鉴过去的概念,Vue 3 中的 Hooks 叫做组合式 API,它包含 Vue 3 提供的响应性 api(ref
, reactive
, computed
, onMounted
…),以及本人编写的 hook 函数。
Hooks 能够对凌乱的代码做逻辑拆分,类似的性能能够不便的进行复用,通过 Hooks 的灵便组合,能够轻松解决大型简单组件。
以下是 Vue 官网的例子,组件的性能被拆分到不同的 Hooks 中。
setup(props) {const { user} = toRefs(props)
const {repositories, getUserRepositories} = useUserRepositories(user)
const {searchQuery, repositoriesMatchingSearchQuery} = useRepositoryNameSearch(repositories)
const {filters, updateFilters, filteredRepositories} = useRepositoryFilters(repositoriesMatchingSearchQuery)
return {
repositories: filteredRepositories,
getUserRepositories,
searchQuery,
filters,
updateFilters
}
}
在 React 中,应用 Hooks 时须要恪守一些规定。不过 Vue 3 的渲染机制不同于 React,在 Vue 3 中应用 Hooks 规定稍有不同:
1. 只在最顶层应用 Hook, 不要在循环,条件或嵌套函数中调用 Hook
因为 Vue 3 应用 Proxy 来追踪数据扭转,Hooks 调用的程序不会影响数据的依赖关系,所以这条规定不用恪守。
2. 只在 React(Setup 和 Hook) 函数中调用 Hook,不要在一般的 JavaScript 函数中调用 Hook
这条规定依然实用于 Vue 3。Hooks 能够用来保留状态,而一般函数不能够。当数据依赖扭转时,函数会被从新执行,如果刚好函数中申明了一些状态,例如 ref
对象,那么这个状态就会被重置,从而导致意外的状况产生。所以 Hook 只能在 Setup 函数以及其余 Hook 中调用。
// ❎ 不要在一般函数中调用 hook(ref)
function renderInput() {
// 当 input 从新渲染时,inputValue 会被重置
const inputValue = ref('')
return <input v-model={inputValue.value} />
}
// ✅ 在 setup 中调用 hook(ref)
setup() {const inputValue = ref('')
return ({renderInput(inputValue)}
)
}
// 通过参数传递 inputValue
function renderInput(inputValue) {return <input v-model={inputValue.value} />
}
Problems
目前,Vue 3 对 ts 的反对度还没有达到 100%,所以仍存在一些问题,例如:
-
tsx 代码无奈热更新,需手动刷新(截至 2021/4/30)
<script lang="tsx"> defineComponent({setup(props) {return () => (<div>the text here won't change with HMR</div>) } }) </script>
-
函数模式的属性默认值会烦扰 typescript 类型推断,需改为箭头函数(截至 2021/4/30)
// ❎ 会烦扰 typescript 类型推断 export default defineComponent({ props: { objectProp: { type: Object, default() {return {} } }, arrayProp: { type: Array, default() {return [] } } } }) // ✅ 应用箭头函数 export default defineComponent({ props: { objectProp: { type: Object, default: () => ({}) }, arrayProp: { type: Array, default: () => [] } } })
References
- Vue 3 typescript 反对 (https://v3.cn.vuejs.org/guide/typescript-support.html)
- jsx-next repo (https://github.com/vuejs/jsx-next)
- Vue 3 组合式 api (https://v3.cn.vuejs.org/guide/composition-api-introduction.html)