完整教程：vue3新增哪些内容以及api更改了哪些

好问题 ，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：

Vue.use()
Vue.mixin()
Vue.component()
Vue.directive()
Vue.filter()

Vue3 → 全部移动到应用实例上：

const app = createApp(App)
app.use()
app.mixin()
app.component()
app.directive()
// Vue3 已移除 filter

---

2. 生命周期钩子名称

• Vue2: beforeCreate、created

• Vue3: 对应在 setup() 里实现（没有再单独的 API）

• 其他生命周期变成组合式 API：

  • beforeMount → onBeforeMount

  • mounted → onMounted

  • beforeUpdate → onBeforeUpdate

  • updated → onUpdated

  • beforeDestroy → onBeforeUnmount

  • destroyed → onUnmounted

---

3. v-model 改动

• Vue2:

等价于：

: value="msg"
@input="msg = $event"

• Vue3：
  默认绑定 modelValue，触发 update:modelValue 事件：

等价于：

: modelValue="msg"
@update:modelValue="msg = $event"

支持多个 v-model：

---

4. 自定义指令

• bind → beforeMount

• inserted → mounted

• update → 移除，直接用 updated

• componentUpdated → 移除

• unbind → unmounted

---

5. 过滤器 (filter) 移除

• Vue2 里可以 {{ msg | capitalize }}

• Vue3 已删除 → 推荐用 computed 或 methods

---

6. 异步组件写法

Vue2：

const AsyncComp = () => import('./Comp.vue')

Vue3：

import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => import('./Comp.vue'))

---

7. $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）