Vue 3.4 是一次以性能提升和开发体验优化为核心的更新,没有引入颠覆性的概念,但实实在在地让已有的代码跑得更快、写起来更舒服。下面逐个拆解最有感知的几个特性。
解析器重写:模板编译速度翻倍
Vue 3.4 完全重写了模板解析器,使用基于状态机的词法分析取代原先的正则匹配。在官方基准测试中,模板编译速度提升了约 2 倍。这个改动对生产环境构建速度影响不大(因为模板预编译发生在 vue-loader/@vitejs/plugin-vue 中),但在开发模式下热更新(HMR) 的响应时间明显缩短——修改模板后,组件重新编译几乎瞬间完成,对大项目尤为明显。开发者无需做任何配置,升级后自动受益。
defineModel 稳定化:v-model 双向绑定的简洁写法
在 Vue 3.3 中作为实验特性引入的 defineModel,在 3.4 中正式转正。它解决了父组件中使用 v-model 时,子组件需要手动定义 props 和 emits 的模板代码问题。
之前的写法(繁琐):
<!-- 子组件 -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
<input :value="props.modelValue" @input="emit('update:modelValue', $event.target.value)" />
</template>
使用 defineModel(简洁):
<!-- 子组件 -->
<script setup>
const model = defineModel()
</script>
<template>
<input v-model="model" />
</template>
defineModel() 返回一个 ref,直接用在 v-model 上即可。它还支持多个 v-model:
<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>
这对封装表单组件、弹窗组件等场景非常实用,大幅减少了样板代码。
v-bind 同名简写
当属性名和变量名一致时,Vue 3.4 允许省略属性值。
<script setup>
const id = ref('my-id')
const disabled = ref(false)
</script>
<template>
<!-- 之前 -->
<input :id="id" :disabled="disabled" />
<!-- 3.4 简写 -->
<input :id :disabled />
</template>
这种写法在传递大量 Props 时视觉上更干净,也减少了拼写不一致的可能。
watch 的 once 选项
watch 新增 once: true 选项,让侦听器只在第一次变化时触发一次,然后自动停止。适合处理仅需执行一次的初始化副作用,比如“某个数据第一次加载后执行特定逻辑,之后不再关心它的更新”。
<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newVal) => {
console.log('第一次变化:', newVal)
}, { once: true })
</script>
以往需要手动调用 stop() 或在函数内部标记 flag,现在一行配置搞定。
响应式系统优化:更少的组件重渲染
Vue 3.4 内部改进了依赖追踪算法,特别是在计算属性链较长或通过 watchEffect 访问深层响应式对象时,减少了不必要的副作用触发。体现在实际项目中,就是那些“明明无关数据变化,组件也重渲染了一次”的隐性性能损耗进一步降低。这个优化对开发者透明,但大型中后台应用能感受到更新更精准、页面交互更流畅。
更好的 TypeScript 支持
defineProps和defineEmits的类型推导更加精准,尤其是在使用as const或字面量类型时。- 组合式 API 中的
withDefaults在类型上表现更稳健,不再需要额外的类型断言。 - 对全局组件、全局指令的类型扩充变得更简单(通过
GlobalComponents等接口)。
其他实用改进
v-bind同名简写支持动态参数(:=''),不过较少用到。Suspense的稳定性提升,处理嵌套异步依赖时的行为更可预测。- SSR 相关的内部异常处理更友好,对 Nuxt 用户尤其有益。
升级建议
Vue 3.4 与 3.3 完全兼容,官方配套库(Router、Pinia、Vite 插件)均已跟进适配。升级只需要 npm install vue@latest,通常不会遇到编译错误。建议在非生产环境先跑一次测试套件或回归测试,然后放心推进。
总结:Vue 3.4 没有改变你写 Vue 的方式,它只是让 Vite 刷新更快、v-model 组件封装更简单、模板传参更清爽、不必要的渲染更少。这种“不打扰,但处处受益”的更新,正是一个成熟框架该有的节奏。