vue3.6更细哪些东西

截至目前(2025年7月),Vue 3.6 的发布日志(Release Notes)已经公布,其主要是一次 增强功能和提升开发体验 的小版本更新,没有破坏性变更(breaking changes),但有不少值得关注的新功能。以下是 Vue 3.6 的核心更新内容:


🆕 Vue 3.6 更新重点一览

1. defineModel() 正式发布

用于简化子组件和父组件之间的 v-model 绑定逻辑(Composition API 中替代 modelValue / emit 的繁琐代码)。

xml 复制代码
// 子组件
<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 同时使用时的体验:

ini 复制代码
<Child v-model:title="title" v-model:content="content" />
ini 复制代码
// 子组件
const title = defineModel('title')
const content = defineModel('content')

3. 新的 <script setup> 宏:defineOptions()

以前我们要给组件加 name,只能用 export default,现在可以直接用:

xml 复制代码
<script setup>
defineOptions({
  name: 'MyComponent',
  inheritAttrs: false,
})
</script>

4. 增强的事件类型推导

当你使用 defineEmits 定义事件时,Vue 会更智能地推导出类型和参数,支持自动提示:

c 复制代码
const emit = defineEmits<{
  (e: 'submit', payload: string): void
  (e: 'cancel'): void
}>()

emit('submit', 'hello') // 类型检查和提示

5. 自定义指令生命周期增强

Vue 3.6 支持在指令中使用新的生命周期钩子:

javascript 复制代码
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)。

xml 复制代码
<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 开发的项目,可以明显感受到类型推导增强

📌 如何升级

css 复制代码
npm install vue@3.6

如果你使用的是 vite 或 vue-cli,确保也升级对应插件:

kotlin 复制代码
npm install vue@3.6 @vitejs/plugin-vue@latest

相关推荐
一水鉴天12 分钟前
统一对象拓扑(UOT)设计全链定稿:从三件事分离到三继承 之1 20261010(豆包“查看聊天内容”继续)
前端·css
栖凤23 分钟前
Java 的 try-catch 在 Agent 里失效了,我用了 5 个模式才兜住
java·前端·python
粥里有勺糖24 分钟前
视野修炼第136期 | 前端小恐龙"Deno"被收购
前端·github·ai编程
修炼的dance28 分钟前
页面塞了13.88 MB字体,导出的PDF只有71 KB
前端
qq_3691736329 分钟前
如何将 AI 生成的 HTML 网页发布成在线链接?不用自己搭建服务器
前端·人工智能·html·效率工具·html 发布
风花一世月37 分钟前
⚡ 我把一座含氢能源园区搬进了浏览器(五类能流实时算守恒,在线直接玩)
前端·人工智能
羲云1 小时前
Claude 越界事件之后:Agent 权限设计为什么不能只靠提示词
前端
行者全栈架构师1 小时前
【鸿蒙心迹】鸿蒙网络请求架构实战——@ohos.net.http 到 Axios 封装、拦截器与统一错误处理(HarmonyOS 7.x)
前端·算法·架构
全栈Agent 小李1 小时前
【无标题】
前端·后端·agent·ai编程·全栈·cursor·mcp
羲云1 小时前
别让 AI 凭记忆做调研:给 WorkBuddy 接上可核验的实时搜索
前端