截至目前(2025年7月),Vue 3.6 的发布日志(Release Notes)已经公布,其主要是一次 增强功能和提升开发体验 的小版本更新,没有破坏性变更(breaking changes),但有不少值得关注的新功能。以下是 Vue 3.6 的核心更新内容:
🆕 Vue 3.6 更新重点一览
1. defineModel()
正式发布
用于简化子组件和父组件之间的
v-model
绑定逻辑(Composition API 中替代modelValue
/emit
的繁琐代码)。
// 子组件
<script setup>
const model = defineModel() // 默认接收 modelValue、emit update:modelValue
</script>
<template>
<input v-model="model" />
</template>
✅ 支持自定义参数名:
defineModel('checked')
✅ 支持多个
v-model
✅ 类型推导良好
2. v-model
多参数(支持多个模型)
Vue 3.6 完善了多个 v-model
同时使用时的体验:
<Child v-model:title="title" v-model:content="content" />
// 子组件
const title = defineModel('title')
const content = defineModel('content')
3. 新的 <script setup>
宏:defineOptions()
以前我们要给组件加 name
,只能用 export default
,现在可以直接用:
<script setup>
defineOptions({
name: 'MyComponent',
inheritAttrs: false,
})
</script>
4. 增强的事件类型推导
当你使用 defineEmits
定义事件时,Vue 会更智能地推导出类型和参数,支持自动提示:
const emit = defineEmits<{
(e: 'submit', payload: string): void
(e: 'cancel'): void
}>()
emit('submit', 'hello') // 类型检查和提示
5. 自定义指令生命周期增强
Vue 3.6 支持在指令中使用新的生命周期钩子:
export default {
mounted(el, binding) {
// ✅ now supports async, better debugging
},
updated(el, binding) {},
unmounted(el) {},
}
6. DevTools 和类型增强
更完善的
<script setup>
类型推导更强的 TS 支持
更少的
any
,更友好的 DX(开发体验)
7. 支持 Reactivity Transform(依然实验性)
虽然 Vue 团队并未默认启用这个功能,但 Vue 3.6 对 Reactivity Transform
的支持更加完善(即不再手动写 .value
)。
<script setup>
refCount = $ref(0)
function inc() {
refCount++ // 不需要 `.value`
}
</script>
8. 更小的打包体积与更快的响应式系统性能
Vue 3.6 在底层微调了响应式对象的处理方式,提高了效率。
⛔️ 注意事项
Vue 3.6 不再支持 IE11(其实 Vue 3.x 早期版本就已宣布废弃 IE 支持)
部分 API 虽然标记为稳定,但仍建议配合最新的 TypeScript 使用,以获得完整体验
✅ 升级建议
如果你使用的是:
Vue 3.2 或更高版本,升级到 3.6 没有破坏性变更
使用
<script setup>
的项目,强烈建议升级以获得defineModel()
等功能使用 TS + Volar 开发的项目,可以明显感受到类型推导增强
📌 如何升级
npm install vue@3.6
如果你使用的是 vite
或 vue-cli
,确保也升级对应插件:
npm install vue@3.6 @vitejs/plugin-vue@latest