Vue 3.4 与 <script setup> 进阶技巧

Vue 3.3/3.4 两个版本集中补齐了 DX（开发者体验）短板，<script setup> 的能力已相当完整。整理实战中最有价值的新写法。

1. defineModel：双向绑定不再繁琐

以前父子双向同步要手写 props + emit 更新，3.4 稳定的 defineModel 一步到位：

<!-- 子组件：<my-input v-model="text"> -->
<script setup lang="ts">
const model = defineModel<string>({ required: true })
</script>

<template>
  <input :value="model" @input="model = $event.target.value" />
</template>

还支持命名 model、多个绑定和修饰符。

2. 泛型组件

<script setup lang="ts" generic="T">
defineProps<{ items: T[]; label: (item: T) => string }>()
</script>

Select、Table 这类通用组件现在有完整的类型推导。

3. defineSlots / defineOptions

类型化插槽用 defineSlots 声明；组件 name、inheritAttrs 等选项用 defineOptions，不必再开第二个 script 块。

4. 响应式 props 解构

3.5 正式支持 props 解构保持响应式（编译期魔法），解构变量可直接传入 watch、模板使用，不再必须 toRefs。

5. 类型化模板引用

<MyModal ref="modal" />
<script setup lang="ts">
const modal = ref<InstanceType<typeof MyModal>>()
modal.value?.open() // 有完整类型
</script>

3.4 的性能改进

• 模板解析器重写，编译速度提升约 2 倍
• 响应式系统重构，computed 重新计算更高效（为 3.5 的大优化铺路）
• 错误信息和类型提示更准确

其他实用细节

• useTemplateRef('name')：更直观的模板 ref 获取
• 组件上的 v-bind 同名简写 <User :id :name />
• useId：SSR 安全的唯一 ID 生成（表单 label/aria 属性利器）
• onWatcherCleanup：watch 回调内注册清理，比 onCleanup 参数更灵活

升级成本很低，建议所有 Vue 3 项目跟进最新小版本，纯收益。