以下是我整理的一篇
Vue 3综合技术文章，涵盖核心特性、组合式 API、响应式系统、实用技巧及与 Vue 2 的主要区别，可作为学习或分享使用。
前言
Vue 3 自 2020 年 9 月正式发布以来，凭借更快的性能、更小的包体积、更好的 TypeScript 支持以及全新的组合式 API，迅速成为前端开发的主流框架之一。本文将带你系统梳理 Vue 3 的关键变化与核心用法，帮助你快速上手并平稳迁移。
1. Vue 3 的整体升级亮点
- 性能提升：重写虚拟 DOM，编译器生成更优的渲染函数；首次渲染快 55%，更新快 133%。
- 体积减小：基于 Tree-shaking，未使用的功能不会打包；核心运行时 gzip 后约 10KB。
- TypeScript 原生支持：框架本身用 TypeScript 重写，开发体验更流畅。
- 组合式 API（Composition API）：更灵活的代码组织方式，便于逻辑复用和大型项目管理。
- 新组件 ：
<Teleport>、<Suspense>等解决常见场景问题。 - 响应式系统升级 ：基于
Proxy，能拦截数组变化和动态新增属性，无需Vue.set。
2. 响应式系统：ref 与 reactive
Vue 3 使用 Proxy 实现了真正的"全量"响应式。
- ref ：适用于基本类型或单值，通过
.value访问 / 修改。 - reactive：适用于对象和数组，直接访问属性即可。
vue
<script setup>
import { ref, reactive } from 'vue'
const count = ref(0)
const state = reactive({
name: 'Vue 3',
items: []
})
function increment() {
count.value++
}
function addItem(item) {
state.items.push(item)
}
</script>区别：
ref在模板中自动解包（无需.value），但在 JS 中必须使用.value。reactive不可直接解构（会失去响应式），如需解构可使用toRefs。
3. 组合式 API：组织代码的新方式
组合式 API 最大的价值在于 逻辑复用和代码组织 。它不依赖于 this，可以将同一功能的相关代码写在一起，而不是分散在 data、methods、computed 等选项中。
vue
<script setup>
import { ref, computed, watch, onMounted } from 'vue'
// 功能 A：计数器
const count = ref(0)
const double = computed(() => count.value * 2)
watch(count, (newVal) => {
console.log(`count 变为 ${newVal}`)
})
onMounted(() => {
console.log('组件已挂载')
})
// 功能 B：用户信息获取（可单独封装成 composable）
import { useUser } from './composables/useUser'
const { user, loading, fetchUser } = useUser()
</script>通过 composables（自定义组合函数），你可以把计数组逻辑、请求逻辑等封装成可复用的函数，真正做到"哪用到哪"。
4. 生命周期钩子
Vue 3 中，组合式 API 提供了对应的生命周期函数，命名统一加 on 前缀：
| Vue 2 选项 | Vue 3 组合式钩子 |
|---|---|
| beforeCreate | setup() 本身替代 |
| created | setup() |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeUnmount | onBeforeUnmount |
| unmounted | onUnmounted |
setup 执行时机在 beforeCreate 之前，里面没有 this，所有数据、方法都需要 return 或使用 <script setup> 自动暴露。
5. 计算属性与侦听器
- computed：返回一个只读的 ref。
- watch ：可侦听 ref、reactive、getter 函数，支持
immediate、deep等选项。 - watchEffect：自动追踪依赖，无需显式指定源，立即执行并在依赖变化时重新运行。
js
const state = reactive({ search: '', page: 1 })
watchEffect(() => {
console.log('搜索条件或页码变化：', state.search, state.page)
})使用建议：
- 需要显式控制源、获取新旧值 → 用
watch - 只关心副作用自动重跑 → 用
watchEffect
6. 新内置组件
Teleport（传送门）
将子节点渲染到 DOM 中的指定位置，常用于模态框、通知等。
vue
<Teleport to="body">
<div class="modal">弹窗内容</div>
</Teleport>Suspense（实验性）
支持异步组件加载时的占位处理，配合 defineAsyncComponent 使用更佳。
vue
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>加载中...</div>
</template>
</Suspense>7. <script setup> 语法糖
单文件组件的简化写法，让代码更简洁：
vue
<script setup>
import { ref } from 'vue'
const msg = ref('Hello Vue 3')
const emit = defineEmits(['update'])
const props = defineProps({
title: String
})
</script>
<template>
<h1>{{ msg }}</h1>
</template>组件自动注册、props 与 emit 无需额外声明，内部变量可直接在模板中使用。
8. TypeScript 集成
Vue 3 完全支持 TS 类型推导，defineProps 和 defineEmits 均可传入类型：
ts
const props = defineProps<{ title: string }>()
const emit = defineEmits<{
(e: 'update', value: string): void
}>()配合 Volar 插件，获得极佳的开发体验。
9. 从 Vue 2 迁移要点
- 全局 API 变更 ：
Vue.prototype改为app.config.globalProperties；Vue.use变为app.use。 - v-model 语法 ：支持多个
v-model绑定，替换.sync修饰符。 - 事件总线移除 ：官方不再维护
$on / $off，推荐使用 mitt 或组合式 API 传值。 - 过滤器（filters）废弃：请改用计算属性或全局方法。
- 数组 / 对象侦测 ：无需
$set，直接赋值即可被拦截。 - 渲染函数写法 ：不再依赖 VNode 构造器选项，
h函数从全局引入。
10. 实践建议
- 新项目直接使用 Vue 3 + Vite + TypeScript 起步，性能与开发体验最佳。
- 逻辑复用优先使用组合式 API 封装 composable，而不是 mixins。
- 状态管理推荐 Pinia（Vue 官方替代 Vuex 的方案），TypeScript 友好，模块化设计。
- 路由使用 Vue Router 4.x，API 与 Vue 3 深度匹配。
- 大型项目合理拆分
composables与组件，保持单一职责。
总结
Vue 3 在性能、开发体验和代码组织上带来了质的飞跃。组合式 API 提供了前所未有的灵活性，响应式系统不再有"死角"，TypeScript 支持让代码更健壮。无论你是 Vue 2 老手还是前端新人，都值得全面拥抱 Vue 3。