Vue3 + TypeScript 项目最佳实践

admin

2025-11-23 05:21 阅读 1256

Vue3配合TypeScript开发的最佳实践指南，包含项目结构、类型定义、组合式API等内容

Vue3 组合式 API 核心概念

Vue3 的组合式 API（Composition API）是一种全新的代码组织方式，它让我们可以更灵活地组织组件逻辑。

1. setup() 函数

setup() 是组合式 API 的入口点，在组件创建之前执行：

import { ref, reactive, computed } from "vue"

export default { setup() { // 响应式数据 const count = ref(0) const state = reactive({ name: “Vue3” })


// 计算属性
const doubleCount = computed(() => count.value * 2)

// 方法
const increment = () => count.value++

return { count, state, doubleCount, increment }

} }

2. ref 与 reactive

ref 用于基本类型，通过 .value 访问：

const count = ref(0)
console.log(count.value) // 0

reactive 用于对象类型，直接访问属性：

const state = reactive({ count: 0 })
console.log(state.count) // 0

3. 生命周期钩子

import { onMounted, onUpdated, onUnmounted } from "vue"

setup() { onMounted(() => console.log(“组件挂载”)) onUpdated(() => console.log(“组件更新”)) onUnmounted(() => console.log(“组件卸载”)) }

4. watch 与 watchEffect

import { watch, watchEffect } from "vue"

// 监听特定数据 watch(count, (newVal, oldVal) => { console.log(count: ${oldVal} -> ${newVal}) })

// 自动追踪依赖 watchEffect(() => { console.log(count is: ${count.value}) })

5. 自定义 Hooks

将逻辑封装为可复用的函数：

// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const increment = () => count.value++
  const decrement = () => count.value--
  return { count, increment, decrement }
}

// 使用 const { count, increment } = useCounter(10)

最佳实践

使用 TypeScript 获得更好的类型支持
将相关逻辑组织在一起
提取可复用逻辑为 composables
使用 toRefs 解构 reactive 对象