'# vue3 + tsx语法小记
一、背景与问题
在Vue3的开发实践中，TSX（TypeScript JSX）逐渐成为主流开发范式。相比传统Vue模板语法，TSX提供了更接近原生JS的开发体验，同时结合TypeScript的类型系统，能够显著提升大型项目开发效率和代码可维护性。
当前开发中常遇到的痛点包括：
- 复杂组件中类型推断不准确
- 事件处理逻辑需要额外封装
- 动态内容渲染时的类型安全问题
- 与第三方库的类型兼容性问题
传统Vue模板语法虽然直观，但在处理复杂逻辑时容易出现模板污染（template pollution），而TSX通过函数式组件和显式类型声明，能够有效解决这些问题。
二、基本原理
Vue3的响应式系统基于Proxy实现，而TSX通过以下机制与Vue3深度集成：
- 组件函数式化：通过
defineComponent将组件定义为函数 - 响应式数据绑定：使用
ref/reactive创建响应式数据 - JSX语法转换：通过Babel将TSX转换为React-like的JS代码
- 类型推断机制：利用TypeScript的类型系统进行静态检查
TSX的核心优势在于将Vue组件的结构化和类型检查结合起来，形成"声明式组件"的开发模式。其底层原理与React的JSX机制类似，但通过Vue3的响应式系统实现数据绑定。
三、环境准备
# 创建项目
npm init -y
npm install -D typescript tsx @vitejs/plugin-vue @vitejs/plugin-react @types/react @types/react-dom配置tsconfig.json：
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"strict": true,
"jsx": "react",
"jsxFactory": "h",
"esModuleInterop": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"types": ["vite/client", "react", "react-dom"]
},
"include": ["src"]
}Vite配置：
import vue from '@vitejs/plugin-vue'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
vue(),
react()
]
})四、核心实现
1. 基础组件实现
// src/components/HelloWorld.tsx
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'HelloWorld',
props: {
name: {
type: String,
default: 'World'
}
},
setup(props) {
const count = ref(0)
const increment = () => {
count.value++
}
return () => (
<div>
<h1>Hello {props.name}</h1>
<p>Count: {count.value}</p>
<button onClick={increment}>Increment</button>
</div>
)
}
})关键点解析：
defineComponent创建函数式组件props定义类型和默认值setup函数返回渲染函数- 使用
ref创建响应式变量 onClick事件绑定需要使用函数形式
2. 复杂组件实现
// src/components/Counter.tsx
import { defineComponent, ref, reactive, toRefs } from 'vue'
export default defineComponent({
name: 'Counter',
props: {
initialCount: {
type: Number,
default: 0
}
},
setup(props) {
const state = reactive({
count: props.initialCount,
history: [] as number[]
})
const increment = () => {
state.history.push(state.count)
state.count++
}
const reset = () => {
state.count = props.initialCount
state.history = []
}
return () => (
<div>
<h2>Counter</h2>
<p>Current: {state.count}</p>
<p>History: {state.history.join(', ')}</p>
<button onClick={increment}>Increment</button>
<button onClick={reset}>Reset</button>
</div>
)
}
})关键点解析：
- 使用
reactive创建响应式对象 toRefs用于解构响应式对象- 历史记录数组的响应式更新
- 通过函数返回的渲染函数
3. 与第三方库集成
// src/components/Chart.tsx
import { defineComponent, ref } from 'vue'
import { Chart, ChartOptions, ChartData } from 'chart.js'
export default defineComponent({
name: 'ChartComponent',
props: {
labels: {
type: Array as () => string[],
default: () => ['A', 'B', 'C']
},
data: {
type: Array as () => number[],
default: () => [1, 2, 3]
}
},
setup(props) {
const chartRef = ref<HTMLCanvasElement | null>(null)
let chartInstance: Chart | null = null
const initChart = () => {
if (!chartRef.value) return
const ctx = chartRef.value.getContext('2d')
if (!ctx) return
chartInstance = new Chart(ctx, {
type: 'bar',
data: {
labels: props.labels,
datasets: [{
label: 'Data',
data: props.data
}]
},
options: {
responsive: true
}
})
}
const updateChart = () => {
if (!chartInstance) return
chartInstance.data.datasets[0].data = props.data
chartInstance.update()
}
return () => (
<div>
<canvas ref={chartRef} width="400" height="200"></canvas>
</div>
)
}
})关键点解析：
- 使用ref获取canvas元素
- 使用Chart.js创建图表实例
- 通过响应式数据更新图表
- 注意类型定义的准确性
五、完整案例：待办事项应用
项目结构
src/
├── components/
│ ├── TodoList.tsx
│ └── TodoItem.tsx
├── App.tsx
└── main.tsApp.tsx
// src/App.tsx
import { defineComponent, ref, reactive } from 'vue'
import TodoList from './components/TodoList'
export default defineComponent({
name: 'App',
setup() {
const todos = reactive([
{ id: 1, text: 'Learn Vue3', completed: false },
{ id: 2, text: 'Write article', completed: false }
])
const addTodo = (text: string) => {
todos.push({
id: Date.now(),
text,
completed: false
})
}
return () => (
<div>
<h1>Todo List</h1>
<TodoList todos={todos} />
<AddTodoForm onAdd={addTodo} />
</div>
)
}
})TodoList.tsx
// src/components/TodoList.tsx
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
name: 'TodoList',
props: {
todos: {
type: Array as () => Todo[],
required: true
}
},
setup(props) {
const state = toRefs({
todos: props.todos
})
const toggleComplete = (id: number) => {
const todo = state.todos.find(todo => todo.id === id)
if (todo) todo.completed = !todo.completed
}
return () => (
<ul>
{state.todos.map(todo => (
<li key={todo.id}>
<span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
{todo.text}
</span>
<button onClick={() => toggleComplete(todo.id)}>
{todo.completed ? 'Undo' : 'Done'}
</button>
</li>
))}
</ul>
)
}
})AddTodoForm.tsx
// src/components/AddTodoForm.tsx
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'AddTodoForm',
props: {
onAdd: {
type: Function as () => (text: string) => void,
required: true
}
},
setup(props) {
const inputRef = ref<HTMLInputElement | null>(null)
const text = ref('')
const handleSubmit = (e: Event) => {
e.preventDefault()
if (inputRef.value) {
props.onAdd(inputRef.value.value || '')
text.value = ''
inputRef.value.value = ''
}
}
return () => (
<form onSubmit={handleSubmit}>
<input
ref={inputRef}
v-model={text.value}
placeholder="Add new todo"
/>
<button type="submit">Add</button>
</form>
)
}
})六、源码解析
以TodoList组件为例，其核心实现包含：
响应式数据处理：
- 使用
toRefs将响应式对象转换为普通对象 - 通过
map遍历响应式数组 - 点击事件触发
toggleComplete方法更新数据
- 使用
样式动态绑定：
- 使用内联样式控制文本样式
- 响应式属性变化会自动触发样式更新
事件处理机制：
- 使用函数式事件处理
- 通过
ref获取DOM元素 - 使用
v-model实现双向绑定
七、进阶使用
1. 自定义指令
// src/directives/focus.ts
import { defineDirective, DirectiveBinding } from 'vue'
export default defineDirective('focus', (el: HTMLElement, binding: DirectiveBinding) => {
if (binding.arg === 'on') {
el.addEventListener('focus', () => {
binding.value?.()
})
}
})2. 自定义组件库
// src/components/CustomButton.tsx
import { defineComponent } from 'vue'
export default defineComponent({
name: 'CustomButton',
props: {
label: {
type: String,
required: true
},
onClick: {
type: Function,
default: () => {}
}
},
setup(props) {
return () => (
<button onClick={props.onClick}>
{props.label}
</button>
)
}
})3. 路由集成
// src/router.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
const routes: Array<RouteRecordRaw> = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
export default createRouter({
history: createWebHistory(),
routes
})八、性能与工程实践
1. 性能优化策略
- 使用
v-on修饰符优化事件处理 - 使用
v-show代替v-if进行条件渲染 - 使用
v-once避免重复渲染 - 使用
key属性优化列表渲染
2. 类型安全实践
- 在
tsconfig.json中启用严格模式 - 使用类型断言处理未知类型
- 使用类型守卫进行类型校验
- 使用
@ts-ignore标记需要忽略的代码
3. 异常处理机制
// src/components/ErrorBoundary.tsx
import { defineComponent, h, onMounted } from 'vue'
export default defineComponent({
name: 'ErrorBoundary',
props: {
fallback: {
type: Function,
required: true
}
},
setup(props) {
const hasError = ref(false)
onMounted(() => {
try {
// 模拟可能出错的代码
throw new Error('Something went wrong')
} catch (e) {
hasError.value = true
}
})
return () => {
if (hasError.value) {
return props.fallback()
}
return h('div', '正常内容')
}
}
})九、常见问题与踩坑
1. 类型推断问题
// 错误示例
const list = ref<unknown>([])
list.value.push(1) // 编译错误解决办法：
const list = ref<number[]>([])
list.value.push(1) // 正确2. 事件绑定问题
// 错误示例
<button onClick={this.handleClick}>Click</button>解决办法：
<button onClick={handleClick}>Click</button>3. 响应式数据更新问题
// 错误示例
const count = ref(0)
count.value = 1 // 不会触发更新解决办法：
const count = ref(0)
count.value++ // 会触发更新4. TSX与Vue3版本兼容性
问题：Vue3.2+版本需要使用h函数进行JSX转换
解决方案：
// tsconfig.json
{
"compilerOptions": {
"jsxFactory": "h"
}
}十、最佳实践
组件封装规范：
- 使用
defineComponent定义组件 - 保持组件单一职责
- 使用props传递数据
- 使用emits进行事件通信
- 使用
类型定义规范：
- 使用类型别名定义复杂类型
- 使用接口定义组件props
- 使用类型断言处理未知类型
- 使用类型守卫进行类型校验
性能优化规范：
- 使用
v-on修饰符优化事件处理 - 使用
v-show代替v-if进行条件渲染 - 使用
v-once避免重复渲染 - 使用
key属性优化列表渲染
- 使用
代码组织规范：
- 使用
src目录组织代码 - 使用
components目录存放组件 - 使用
views目录存放页面 - 使用
utils目录存放工具函数
- 使用
十一、总结
Vue3结合TSX提供了更现代的开发体验，通过函数式组件和类型系统，能够显著提升代码质量和开发效率。在大型项目开发中，TSX的类型安全和结构化开发模式具有明显优势，特别是在需要严格类型检查和复杂逻辑处理的场景。
然而，对于小型项目或团队不熟悉TSX的场景，传统Vue模板语法可能更易于上手。同时，需要关注TSX的性能开销，避免过度使用响应式数据导致的性能问题。
在实际开发中，建议：
- 对大型项目使用TSX+Vue3
- 对简单项目使用Vue模板语法
- 对需要严格类型检查的项目使用TSX
- 对需要与第三方库集成的项目使用TSX
- 对需要快速开发的项目使用Vue模板语法
通过合理选择开发方案，可以最大化发挥Vue3和TSX的优势，提升开发效率和代码质量。