Vue3 新特性深入理解与项目迁移指南 · 课程目录

Vue3 前世今生痛点&破局

Vue2 的痛点与 Vue3 的破局，为什么要有 Vue3？

开发环境搭建 Vite

Vite 安装与使用，创建第一个 Vue3 项目

Composition API 入门

setup、ref 与 reactive 响应式基础

深入响应式系统 Proxy

Proxy 原理、ref/reactive 异同、响应式丢失

计算属性与侦听器

computed、watch 与 watchEffect 的区别

生命周期钩子新写法

Vue3 生命周期变化、onMounted/onUnmounted

模板语法与指令

v-model 升级、v-for/v-if 优先级、自定义指令

组件通信 provide/inject

defineProps、defineEmits、mitt 事件总线

插槽新特性

具名插槽、作用域插槽、动态插槽名

Teleport 传送门

解决模态框、弹窗等定位问题

Suspense 异步组件

处理异步依赖、加载状态管理

Fragment 与多根节点

Vue3 模板不再需要单一根元素

全局 API 变更

createApp、app.use、app.mount 新用法

Tree-shaking 优化

按需引入、减小打包体积

TypeScript 集成

Vue3 对 TS 原生支持、defineComponent 类型推导

Pinia 状态管理

Pinia 与 Vuex 对比、Store 定义与使用

路由配置变化、动态路由、导航守卫

组合式函数 (Composables)

逻辑复用、自定义 Hook 设计模式

响应式工具函数

toRef、toRefs、unref、isRef 等实用工具

深入 ref 高级用法

shallowRef、triggerRef、customRef

深入 reactive

shallowReactive、readonly、shallowReadonly

Effect 作用域

effectScope、onScopeDispose 管理副作用

渲染函数与 JSX

h 函数、渲染函数组件、JSX 配置

自定义渲染器

createRenderer 构建跨平台渲染

v-memo、动态组件缓存、函数式组件

迁移策略总览

Vue2 到 Vue3 兼容方案、迁移构建版本

破坏性变更详解

v-model、key、过滤器、事件 API 等变化

项目迁移实战

Vue2 Options API → Composition API

迁移工具与插件

@vue/compat、迁移助手、eslint 插件

Vue3 生态展望

Nuxt3、Vite 生态、未来趋势