Vue 词条目录
前端Wiki/词条/Vue2 迁移 Vue3

Vue2 迁移 Vue3

定义把 Vue 2 项目升级到 Vue 3 需要处理的破坏性变更与构建工具迁移

Vue 3 相对 Vue 2 有一批破坏性变更:全局 API 改为 createApp 工厂函数、v-model 由 value 与 input 事件改为 modelValue 与 update:modelValue、过滤器被移除、事件总线的 $on 与 $off 不再挂于实例,多根节点则被正式支持。数据响应式也从 Object.defineProperty 换成 Proxy,新增与删除属性现在都是响应式的。

升级路径有两条:大型项目可先升级到 Vue 2.7 提前用上组合式 API,再逐步替换依赖;直接跳到 Vue 3 则推荐用 @vue/compat 兼容构建运行旧代码,按警告逐处改造。构建工具方面 Vue CLI 应换成 create-vue(基于 Vite),element-ui 等 UI 库要换成 element-plus 等对应的 Vue 3 版本。

JavaScript
// Vue 2 写法 → Vue 3 写法
// new Vue({ render: h => h(App) }).$mount('#app')
import { createApp } from 'vue';
createApp(App).mount('#app');

// 事件总线:Vue 2 用 new Vue(),Vue 3 改用 mitt 库
// 表单绑定:value + input 事件 → modelValue + update:modelValue

// 兼容构建:挂载兼容版 vue 后,按控制台警告逐条改旧写法
⚠ 常见误区
🔗 相关词条创建应用与挂载create-vue 与 TypeScript
← 返回来源章节create-vue 与 TypeScript