本教程专为零基础、Vue2转Vue3、想进阶Vue3高手的开发者打造，全程摒弃老旧Options API，聚焦Vue3主流的Composition API + <script setup>语法糖，从环境搭建、基础语法、核心原理，到工程化实战、性能优化、源码思维层层递进。
无需Vue基础，只需掌握HTML、CSS、基础JavaScript（ES6+），跟着教程实操，即可从入门成长为企业级Vue3开发高手。
第一阶段：Vue3基础入门（零基础筑基）
1. Vue3核心优势
Vue3是Vue框架的迭代升级版，相比Vue2具备颠覆性优势，也是目前企业项目的唯一主流版本：
- 性能更强：重写响应式原理（Proxy替代Object.defineProperty），支持批量更新、减少冗余渲染，打包体积更小、运行速度更快
- 代码更优雅：Composition API替代Options API，解决大型项目代码碎片化问题，逻辑可复用性极强
- 类型更友好：原生支持TypeScript，适配大型项目、团队协作
- 语法更简洁：<script setup>语法糖简化组件写法，无需手动导出、注册
2. 快速搭建Vue3项目（Vite，官方推荐）
Vite是Vue官方新一代构建工具，相比传统Vue CLI，启动速度、热更新速度提升10倍以上，开发体验极佳。
2.1 全局创建项目
# npm 创建项目（推荐）
npm create vite@latest demo -- --template vue
# yarn 创建
yarn create vite demo --template vue
# pnpm 创建（速度最快）
pnpm create vite demo --template vue
2.2 启动项目
# 进入项目目录
cd demo
# 安装依赖
npm install
# 启动开发环境
npm run dev
启动成功后，访问终端提示的本地地址，即可看到Vue3默认页面，基础环境搭建完成。
2.3 核心项目结构解读（重点）
my-vue3-project/
├── src/
│ ├── main.js # 项目入口文件，全局挂载、配置
│ ├── App.vue # 根组件
│ ├── assets/ # 静态资源（图片、样式）
│ └── components/ # 自定义组件目录
├── index.html # 入口页面（Vite核心，项目挂载点）
├── package.json # 依赖、脚本配置
└── vite.config.js # Vite打包配置
3. 第一个Vue3组件（掌握SFC单文件组件）
Vue3核心是单文件组件（SFC），后缀为.vue，一个组件包含三部分：模板、脚本、样式。
删除默认代码，新建最简组件，全程使用主流的<script setup>语法：
<template>
<!-- 模板区域：只写HTML，支持Vue指令 -->
<div class="demo">
<h1>{{ msg }}</h1>
</div>
</template>
<script setup>
// 脚本区域：逻辑、数据、方法（自动暴露变量、函数到模板）
const msg = "Hello Vue3 零基础入门！"
</script>
<style scoped>
/* 样式区域：scoped代表样式仅当前组件生效，不污染全局 */
.demo {
text-align: center;
margin-top: 50px;
}
</style>
第二阶段：Vue3核心语法
1. 模板语法与数据绑定
1.1 插值语法 {{ }}（文本绑定）
用于展示文本内容，支持变量、简单表达式，自动响应数据更新：
<template>
<div>
<p>普通文本：{{ name }}</p>
<p>表达式计算：{{ age + 1 }}</p>
<p>三元运算：{{ isVip ? '会员' : '普通用户' }}</p>
</div>
</template>
<script setup>
const name = "Vue3教程"
const age = 2
const isVip = true
</script>
1.2 指令语法
Vue指令以v-开头，用于操作DOM，是模板核心能力，整理高频必学指令：
① v-bind：属性绑定（动态绑定HTML属性）
简写为:，动态绑定class、style、src、href等属性：
<template>
<!-- 完整写法 -->
<img v-bind:src="imgUrl" />
<!-- 简写写法（推荐） -->
<a :href="link">跳转链接</a>
<!-- 动态class -->
<div :class="{ active: isActive }">动态样式</div>
</template>
<script setup>
const imgUrl = "https://vuejs.org/logo.svg"
const link = "https://vuejs.org"
const isActive = true
</script>
② v-on：事件绑定（绑定点击、输入等事件）
简写为@，支持点击、键盘、鼠标等所有DOM事件：
<template>
<!-- 点击事件 -->
<button @click="handleClick">点击按钮</button>
<!-- 传参事件 -->
<button @click="handleParam('Vue3')">传参点击</button>
<!-- 键盘回车事件 -->
<input @keyup.enter="handleEnter" placeholder="回车触发" />
</template>
<script setup>
const handleClick = () => {
alert("按钮被点击了")
}
const handleParam = (val) => {
alert(`接收参数：${val}`)
}
const handleEnter = () => {
alert("按下回车键")
}
</script>
③ v-model：双向数据绑定
数据改变更新视图，视图改变同步数据，专为表单元素设计：
<template>
<!-- 输入框双向绑定 -->
<input v-model="inputVal" placeholder="请输入内容" />
<p>实时输入内容：{{ inputVal }}</p>
<!-- 复选框双向绑定 -->
<input type="checkbox" v-model="isCheck" />
<p>选中状态：{{ isCheck }}</p>
</template>
<script setup>
let inputVal = ""
let isCheck = false
</script>
④ 条件渲染 v-if / v-show
两者均可控制元素显示隐藏，核心区别与使用场景：
- v-if：销毁/创建DOM，切换频率低、首次渲染快，适合条件极少变化的场景
- v-show：通过CSS display控制显示隐藏，DOM始终存在，切换频率高、首次渲染稍慢
<template>
<div v-if="isShow">v-if通过销毁和添加Dom节点控制显示隐藏</div>
<div v-show="isShow">v-show控制display样式显示隐藏</div>
</template>
<script setup>
const isShow = true
</script>
⑤ 列表渲染 v-for
循环渲染数组、对象，必须绑定唯一key（提升DOM更新性能）：
<template>
<ul>
<li v-for="(item, index) in list" :key="index">
{{ index + 1 }} - {{ item.name }}
</li>
</ul>
</template>
<script setup>
// 模拟列表数据
const list = [
{ id: 1, name: "Vue3基础" },
{ id: 2, name: "Composition API" },
{ id: 3, name: "工程化实战" }
]
</script>
2. Vue3响应式核心
响应式是Vue的核心，Vue3通过ref、reactive实现数据响应式，数据变更自动更新视图。
2.1 ref 基础响应式（基本数据类型 + 简单对象）
用于定义字符串、数字、布尔值等基本类型数据，修改数据需要加.value。
<template>
<div>
<p>计数器：{{ count }}</p>
<button @click="count++">模板直接修改</button>
<button @click="addCount">方法修改数据</button>
</div>
</template>
<script setup>
// 导入ref
import { ref } from 'vue'
// 定义响应式数据
const count = ref(0)
// 方法中修改必须加.value
const addCount = () => {
count.value += 1
}
</script>
2.2 reactive 响应式（复杂引用类型）
专门用于对象、数组等复杂数据类型，无需.value，直接修改属性即可响应更新。
<template>
<div>
<p>姓名：{{ user.name }}</p>
<p>年龄：{{ user.age }}</p>
<button @click="editUser">修改用户信息</button>
</div>
</template>
<script setup>
import { reactive } from 'vue'
// 定义响应式对象
const user = reactive({
name: "张三",
age: 20
})
// 直接修改属性
const editUser = () => {
user.name = "Vue3学习者"
user.age = 25
}
</script>
2.3 ref vs reactive 最佳使用规范
- 基本类型（String/Number/Boolean）：必用ref
- 复杂对象、表单对象、嵌套数据：必用reactive
- 数组：优先ref，简单数组也可使用reactive
3. 计算属性与监听属性
3.1 computed 计算属性（缓存计算，高效）
基于已有响应式数据计算新数据，自带缓存，依赖不变则不重复计算，适合复杂逻辑计算。
<template>
<div>
<p>原始文本：{{ text }}</p>
<p>反转文本：{{ reverseText }}</p>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const text = ref("Vue3零基础教程")
// 计算属性
const reverseText = computed(() => {
// 文本反转逻辑
return text.value.split('').reverse().join('')
})
</script>
3.2 watch 监听属性（监听数据变化，执行异步/复杂逻辑）
主动监听响应式数据变化，适合异步请求、数据持久化、复杂副作用逻辑。
<template>
<input v-model="searchKey" placeholder="输入关键词监听变化" />
</template>
<script setup>
import { ref, watch } from 'vue'
const searchKey = ref("")
// 监听单个数据
watch(searchKey, (newVal, oldVal) => {
console.log("新值：", newVal, "旧值：", oldVal)
// 可执行逻辑操作
}, { immediate: true }) // immediate：初始页面加载立即执行
</script>
第三阶段：Vue3进阶核心（进阶必学）
1. 生命周期钩子
生命周期是组件从创建、挂载、更新、销毁的完整流程，Vue3在setup中使用组合式生命周期钩子，无this，更简洁。
高频核心生命周期
<script setup>
import { onMounted, onUpdated, onBeforeUnmount } from 'vue'
// 组件挂载完成（DOM渲染完成，适合发接口请求、初始化数据）
onMounted(() => {
console.log("组件挂载完成，DOM已生成")
})
// 组件数据更新完成
onUpdated(() => {
console.log("组件数据更新完成")
})
// 组件销毁前（适合清除定时器、解绑事件，防止内存泄漏）
onBeforeUnmount(() => {
console.log("组件即将销毁，清理副作用")
})
</script>
核心使用原则：初始化接口请求放onMounted，定时器/事件清理放onBeforeUnmount。
2. 组件通信（Vue3工程核心）
组件化开发核心就是组件通信，Vue3主流6种通信方式，覆盖所有场景。
2.1 父子通信：父传子 defineProps
子组件通过defineProps接收父组件传递的数据，支持类型校验、默认值。
父组件 App.vue
<template>
<!-- 父组件传值给子组件 -->
<Child title="Vue3教程" :count="100" />
</template>
<script setup>
import Child from './components/Child.vue'
</script>
子组件 Child.vue
<template>
<div>
<p>接收父组件标题：{{ title }}</p>
<p>接收父组件数值：{{ count }}</p>
</div>
</template>
<script setup>
// 定义props，类型校验+默认值
const props = defineProps({
title: String,
count: {
type: Number,
default: 0 // 默认值
}
})
</script>
2.2 父子通信：子传父 defineEmits
子组件触发自定义事件，向父组件传递数据。
子组件 Child.vue
<template>
<button @click="sendData">向父组件传值</button>
</template>
<script setup>
// 定义自定义事件
const emit = defineEmits(['getChildData'])
const sendData = () => {
// 触发事件并传参
emit('getChildData', '我是子组件的数据')
}
</script>
父组件 App.vue
<template>
<Child @getChildData="handleChildData" />
</template>
<script setup>
import Child from './components/Child.vue'
// 接收子组件数据
const handleChildData = (val) => {
console.log("子组件数据：", val)
}
</script>
2.3 全局通信：provide / inject（跨层级传值）
无需层层传值，父组件向所有后代组件穿透传值，适合深层级组件通信。
2.4 全局状态：Pinia（Vue3官方状态管理）
替代Vuex，API极简、无冗余、支持TS，是Vue3项目全局状态管理首选，适合全局用户信息、主题、全局配置等数据。
3. 组合式函数 Composables
Composables是Vue3核心进阶思想，将重复逻辑、通用逻辑抽离为独立函数，实现逻辑复用，告别代码冗余。
示例：封装通用计数器逻辑 src/composables/useCount.js
import { ref } from 'vue'
// 通用计数器组合式函数
export function useCount(initVal = 0) {
const count = ref(initVal)
// 增加
const increment = () => count.value++
// 减少
const decrement = () => count.value--
// 重置
const reset = () => count.value = initVal
return { count, increment, decrement, reset }
}
组件中直接复用：
<template>
<p>计数：{{ count }}</p>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
<button @click="reset">重置</button>
</template>
<script setup>
// 直接引入复用逻辑
import { useCount } from '@/composables/useCount'
const { count, increment, decrement, reset } = useCount(10)
</script>
第四阶段：Vue3工程化实战（企业级能力）
1. 路由配置 Vue Router 4.x
Vue Router 4是Vue3专属路由，实现单页面跳转、路由守卫、嵌套路由等核心能力。
1.1 安装依赖
npm install vue-router@4
1.2 基础路由配置 src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
// 路由规则
const routes = [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home, name: '首页' }
]
// 创建路由实例
const router = createRouter({
history: createWebHistory(), // history模式（无#）
routes
})
export default router
1.3 全局挂载 main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
1.4 路由跳转与占位
<template>
<!-- 路由占位，匹配组件在此渲染 -->
<router-view />
<!-- 声明式跳转 -->
<router-link to="/home">首页</router-link>
</template>
<script setup>
// 编程式跳转
import { useRouter } from 'vue-router'
const router = useRouter()
const goHome = () => {
router.push('/home')
}
</script>
2. 网络请求封装 Axios
统一封装请求拦截、响应拦截、错误处理、请求前缀，适配企业项目接口对接。
2.1 安装依赖
npm install axios
2.2 全局请求封装 src/utils/request.js
import axios from 'axios'
// 创建实例
const service = axios.create({
baseURL: '/api', // 接口基础路径
timeout: 10000 // 超时时间
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 统一添加token
config.headers.Authorization = localStorage.getItem('token') || ''
return config
},
error => Promise.reject(error)
)
// 响应拦截器
service.interceptors.response.use(
res => res.data,
error => {
// 统一错误提示
console.log("请求错误：", error)
return Promise.reject(error)
}
)
export default service
3. UI组件库集成（企业必备）
Vue3主流UI库，快速搭建企业级页面：
- Element Plus：后台管理系统首选，组件齐全、稳定
- Naive UI：轻量高效、TS友好，适合中大型项目
- Uni UI / Vant：移动端Vue3项目首选
第五阶段：Vue3高手进阶（性能优化+源码思维）
1. 高频性能优化技巧
1.1 渲染优化
- 频繁切换元素用v-show，低频切换用v-if
- v-for必须绑定唯一key，禁止使用index作为复杂列表key
- 大列表使用虚拟列表（vue-virtual-scroller），避免DOM节点过多卡顿
1.2 工程打包优化
- Vite配置分包打包、按需引入组件
- 静态资源压缩、图片懒加载
- 移除冗余依赖、开启Gzip压缩
2. Vue3核心原理（高手必备底层思维）
2.1 响应式原理
Vue3使用Proxy + Reflect实现响应式，对比Vue2的Object.defineProperty：
- 支持数组监听、新增/删除属性监听
- 支持嵌套对象深层监听
- 拦截能力更强，无监听盲区
2.2 虚拟DOM与Diff算法
Vue3重写Diff算法，通过静态标记、PatchFlag，只对比动态变化的DOM节点，大幅减少对比次数，渲染性能远超Vue2。
3. 企业级代码规范（高手标配）
- 统一使用<script setup>语法糖，摒弃Options API
- 通用逻辑抽离Composables，禁止组件内冗余代码
- 组件拆分精细化，单一组件只做一件事
- 接口统一封装、状态统一管理、样式模块化
- 所有变量、函数语义化命名，杜绝魔术变量
第六阶段：学习路线与实战落地
1.必做实战项目（巩固所有知识点）
- 简易TodoList（入门，巩固基础语法）
- 后台管理系统（登录、权限、菜单、表格、表单）
- 数据可视化大屏（ECharts集成、动态数据渲染）
- 移动端资讯页面（适配、懒加载、组件封装）