好问题 👍,Vue3 相比 Vue2 变化还是挺大的,可以从 新增特性 和 API 变更 两方面来总结。
📌 Vue3 新增内容
1. Composition API
setup()入口函数ref()、reactive()、computed()、watch()、watchEffect()- 生命周期钩子改为
onMounted、onUnmounted等(函数形式) - 提供更好的逻辑复用(取代了 Vue2 的 mixins)
2. 新内置组件
<Teleport>:把组件内容渲染到 DOM 的其他地方(比如全局的 modal)<Suspense>:异步组件加载时显示 fallback UI<Fragment>:可以返回多个根节点,不再强制要求只有一个根节点
3. 性能优化
- 虚拟 DOM 重写 → 更快的 diff 算法(Block Tree)
- 更小的打包体积 → tree-shaking 支持(没用到的 API 不会打包进去)
- 按需监听 →
ref/reactive只跟踪被访问过的属性
4. 新的响应式系统
- 基于
Proxy实现(取代 Vue2 的Object.defineProperty) - 能完整支持数组、Map、Set 等复杂数据结构
5. 新的应用实例 API
createApp()取代new Vue()app.mount('#app')- 支持多个 app 实例共存(Vue2 全局单例)
6. TypeScript 支持更好
- Composition API 设计上就是为了更好支持 TS 类型推导
- defineProps / defineEmits(Vue3.2 引入的
<script setup>)
📌 Vue3 API 改动/删除的地方
1. 全局 API 变更
Vue2:
scss
Vue.use()
Vue.mixin()
Vue.component()
Vue.directive()
Vue.filter()
Vue3 → 全部移动到应用实例上:
scss
const app = createApp(App)
app.use()
app.mixin()
app.component()
app.directive()
// Vue3 已移除 filter
2. 生命周期钩子名称
-
Vue2:
beforeCreate、created -
Vue3: 对应在
setup()里实现(没有再单独的 API) -
其他生命周期变成组合式 API:
beforeMount→onBeforeMountmounted→onMountedbeforeUpdate→onBeforeUpdateupdated→onUpdatedbeforeDestroy→onBeforeUnmountdestroyed→onUnmounted
3. v-model 改动
- Vue2:
ini
<input v-model="msg">
等价于:
ini
: value="msg"
@input="msg = $event"
- Vue3:
默认绑定modelValue,触发update:modelValue事件:
ini
<MyInput v-model="msg" />
等价于:
ini
: modelValue="msg"
@update:modelValue="msg = $event"
支持多个 v-model:
ini
<MyInput v-model:title="title" v-model:content="content" />
4. 自定义指令
bind→beforeMountinserted→mountedupdate→ 移除,直接用updatedcomponentUpdated→ 移除unbind→unmounted
5. 过滤器 (filter) 移除
- Vue2 里可以
{{ msg | capitalize }} - Vue3 已删除 → 推荐用 computed 或 methods
6. 异步组件写法
Vue2:
javascript
const AsyncComp = () => import('./Comp.vue')
Vue3:
javascript
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => import('./Comp.vue'))
7. <math xmlns="http://www.w3.org/1998/Math/MathML"> o n / on / </math>on/off / $once 被移除
Vue3 不再提供事件总线(Event Bus),推荐使用:
mitt第三方库- 或者
provide/inject - 或 Vuex/Pinia 这种状态管理
📌 总结对比表
| 功能点 | Vue2 | Vue3 |
|---|---|---|
| 实例创建 | new Vue() | createApp() |
| 响应式实现 | Object.defineProperty | Proxy |
| 生命周期 | created/mounted/... | setup + onMounted 等 |
| 逻辑复用 | mixins | Composition API |
| v-model | value + input | modelValue + update:modelValue |
| 全局 API | Vue.xxx | app.xxx |
| 过滤器 | 支持 | 移除 |
| 异步组件 | import() | defineAsyncComponent |
| 多根节点 | 不支持 | 支持(Fragment) |
| 事件总线 | this.$on | 移除(用 mitt/Pinia) |