Vue 3 变量声明和调用

❌ Vue 2 风格（在 Vue 3 中类型会丢失或错误）

TypeScript 复制代码

const user = ref({})  // 类型是 Ref<{}>，内部属性无法推断

✅ Vue 3 + TS 正确写法：显式声明接口

TypeScript 复制代码

interface User {
  id: number
  name: string
  list?: T[]  // 可选属性
}

const name = ref('')
const count = ref<number | null>(null)        // 不确定默认值的数字类型
const user = ref<User | null>(null)           // 可能为空的场景
const userList = ref<User[]>([])              // 数组场景
const userList = ref<Array<User>>([])         // 等价写法
const activeUsers = ref<User[]>([             // 数组初始有数据
  { id: 1, name: 'Tom' }
])

// 内联类型（适合简单场景）
const user = ref<{ id: number; name: string }>({ id: 0, name: '' })
const user = ref<{ id: number; name: string } | null>(null)
const userList = ref<{ id: number; name: string }[]>([])

// 赋值时类型检查
user.value = { id: 1, name: 'Tom' }  // ✅ 通过
user.value = { id: '1' }             // ❌ TS 报错：类型不匹配

// ✅ 加泛型：类型是 Ref<User | null>，可以灵活切换
const user = ref<User | null>(null)
user.value = { id: 1, name: 'Tom' }  // ✅ 通过，符合 User 类型
user.value = null                     // ✅ 也能变回 null

为什么用 User | null 而不是直接 User
// ❌ 这样写初始值麻烦，必须造个假数据
const user = ref<User>({ id: 0, name: '' })  // 被迫写无意义的默认值

// ✅ | null 表示"可能还没有"，更符合业务逻辑
const user = ref<User | null>(null)  // 明确表示"未加载"

Vue 3 函数声明和调用

TypeScript 复制代码

// 普通函数：明确参数类型和返回类型
function increment(): void {
  count.value++
}

// 带参数和返回值
function add(n: number): number {
  return count.value + n
}

// 箭头函数（常用，保持 this 上下文）
const handleClick = (e: MouseEvent): void => {
  console.log(e.target)
}

// Vue 2：必须用 this
methods: {
  foo() { this.bar() },
  bar() { console.log(this.count) }
}

// Vue 3：直接调用，无 this
function foo() { bar() }
function bar() { console.log(count.value) }

Vue 3 父子组件通信

TypeScript 复制代码

父传子（Props）

// 父组件（一样）
<Child :title="pageTitle" :user="userInfo" />

// 子组件
const props = defineProps<{
  title: string
  user: { id: number; name: string }
}>()

// 或带默认值
const props = withDefaults(defineProps<{
  title: string
  user?: { id: number; name: string }
}>(), {
  user: () => ({ id: 0, name: '' })
})

console.log(props.title)  // 直接访问，无 this


子传父（Events）

// 子组件
const emit = defineEmits<{
  update: [data: { id: number; name: string }]
  'update:modelValue': [value: string]  // v-model
}>()

事件	作用	父组件写法
update	子组件通知父组件"数据更新了"	@update="handleUpdate"
update:modelValue	子组件直接修改父组件的 v-model 值	v-model="formData"

关键区别

使用场景	复杂逻辑、需确认	表单输入、简单同步

TypeScript 复制代码

emit('update', { id: 1, name: 'Tom' })

// 父组件
<Child @update="handleUpdate" v-model="formData" />