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:

<input v-model="msg">

等价于：

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

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

<MyInput v-model="msg" />

等价于：

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

支持多个 v-model：

<MyInput v-model:title="title" v-model:content="content" />

---

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

---