Vue3 是目前 Web 前端开发中非常主流的前端框架之一它不只是在 Vue2 的基础上做一次小规模升级而是从响应式机制、组件逻辑组织到工程化体验都做了整套更新。对零基础准备进入 Web 前端方向的人来说直接学习 Vue3 往往比从 Vue2 过渡更划算因为新项目、官方文档、社区组件库都在向 Vue3 集中。这篇教程围绕一个明确目标展开让零基础的人在 5 小时内完成“认知建立、环境搭建、核心语法、组件通信、路由状态、问题排查”这一整条链路。学完之后你能看懂 Vue3 项目结构能写出一个带交互、能发请求、能跳转页面的小应用也知道出了问题该看哪一层。这里不会把全部 API 列一遍而是优先讲清楚最常用的部分并把容易踩的坑放在最后统一说明。1. Vue3 零基础入门先用 30 分钟建立正确认知1.1 Vue3 到底是什么解决了什么问题Vue3 是一个用于构建用户界面的渐进式前端框架。通俗地说它帮助你用更少的代码把数据变成页面并且在数据发生变化时页面能自动更新。传统开发中如果你要修改页面上的一段文字通常要先通过 id 找到 DOM 元素再手动更新内容Vue 的做法则简单得多你只需维护一个数据变量数据变化后 Vue 负责同步视图。Vue 被称为“渐进式”意思是你可以从一个页面里的一个小组件开始使用也可以逐步引入路由、状态管理、构建工具最终做成一个完整企业级项目。这种特性对零基础学习者非常友好入门时不需要一次掌握全部概念先会用再逐步理解内部机制。从技术定义看Vue3 的核心能力包括三部分响应式系统数据变化自动触发视图更新。组件化页面拆成独立、可复用、可组合的组件。虚拟 DOM 与渲染器高效对比新旧状态最小化操作真实 DOM。零基础阶段不需要深入源码但要有一个意识你写的ref、reactive不是普通变量它们是 Vue 用来跟踪变化的关键对象。理解这一点后续遇到“为什么界面没更新”时就有排查方向。1.2 Vue3 相比 Vue2 的变化初学者只需要记住这几点网上很多资料会对比 Vue2 和 Vue3真正零基础的人不需要记住全部差异只需要先掌握下面这几个关键点因为它们直接影响代码写法。对比项Vue2 常见方式Vue3 常见方式初学者要关注的点响应式原理Object.defineProperty劫持属性Proxy代理整个对象Vue3 能监听新增属性和删除属性用起来比 Vue2 更省心逻辑组织data、methods、computed分块setup/script setup组合式写法相关逻辑可以放一起业务复杂后更容易维护生命周期created、mounted、destroyedonMounted、onUnmounted等函数名前加了on需要在 setup 中调用组件根节点模板只能有一个根节点支持多个根节点写模板时不必再额外包一层 div响应式 API组件里直接用this.xxxref、reactive定义数据组合式 API 中没有this不要混用旧习惯其中最重要的一点是Vue3 推荐使用组合式 APIComposition API。你可能会在旧项目里看到 Options API 写法也就是data、methods分开写。但新项目、新教程基本都使用script setup本文后续示例也统一采用这种写法。1.3 零基础学好 Vue3 需要的前置知识清单虽然标题说“零基础”但 Vue3 并不是完全不需要 JavaScript 基础。你可以先把下面这份清单当成自检表不用全部精通但至少要在看到代码时知道它是什么。知识点需要掌握到什么程度原因HTML 标签和属性能看懂 div、span、input、button、formVue 模板本质是 HTML 的扩展CSS 基础能写 class、改样式组件样式隔离和页面布局靠它JavaScript 基础变量、函数、数组、对象、条件、循环响应式数据、事件处理、接口请求都建立在 JS 上ES6 常用语法let、const、箭头函数、模板字符串、模块导入导出组合式 API 大量使用这些语法浏览器开发者工具能打开控制台、查看 Elements、Network验证结果、排查报错的基本功如果上面有几项还比较陌生不用暂停学习。在动手写 Vue3 代码的过程中自然会遇到再回头补基础即可。最理想的状态是先会用再理解原理最后再系统性补基础。2. 开发环境搭建1 小时内准备好一个可运行的 Vue3 项目2.1 安装 Node.js 和包管理器Vue3 项目通常需要 Node.js 环境因为 Vite 开发服务器和依赖安装都依赖它。你不需要懂 Node.js 后端开发只需要把它当成 Vue3 的运行环境来安装。安装完成后打开终端或命令行执行以下命令确认环境正常node -v npm -v推荐使用 Node.js 的 LTS 版本因为稳定兼容性好。如果执行命令后提示找不到命令说明 Node.js 没有成功安装或安装后没有重启终端。npm 是 Node.js 自带的包管理器用来安装 Vue、Vue Router、Axios 等第三方库。除 npm 外前端社区还常用 pnpm 和 yarn它们安装速度不同但使用思路一致。零基础阶段先用 npm 就够了完全能跑通所有示例。2.2 用 Vite 创建 Vue3 项目并启动Vite 是目前 Vue3 项目最常用的构建工具它的特点是启动极快开发体验好。打开终端进入你想存放项目的目录然后执行npm create vitelatest vue3-demo -- --template vue执行后Vite 会创建一个名为vue3-demo的目录并生成一个 Vue 基础模板。接着进入目录安装依赖cd vue3-demo npm install npm run dev如果在某些 npm 版本下上面的--template写法不生效也可以使用 Vue 官方提供的脚手架命令交互式选择功能npm create vuelatest vue3-demo这个命令会询问你是否需要 TypeScript、Vue Router、Pinia 等零基础学习阶段可以先全选 No保持最小化项目越简单越容易理解。启动成功后终端会输出一个本地地址通常是http://localhost:5173打开浏览器访问这个地址如果看到 Vue 的默认欢迎页说明环境已经跑通。2.3 项目结构、关键文件与启动验证创建出来的vue3-demo目录结构比较精简初学者先关注这几个部分vue3-demo ├── index.html ├── package.json ├── vite.config.js ├── public └── src ├── main.js ├── App.vue ├── components └── assetsindex.html是浏览器真正加载的入口页面。Vite会把src/main.js编译后注入到这个页面中。src/main.js是整个应用的入口核心代码是创建 Vue 实例并挂载到页面import { createApp } from vue import App from ./App.vue import ./assets/main.css createApp(App).mount(#app)src/App.vue是根组件。你可以把它理解成一个页面容器后续所有组件都会从这里开始组合。修改App.vue改成最简单的 Hello Vue3script setup import { ref } from vue const message ref(Hello Vue3) /script template h1{{ message }}/h1 /template保存后浏览器会自动刷新看到页面上显示Hello Vue3说明你已经成功修改了第一个 Vue3 组件。这里的关键是script setup它是 Vue3 组合式 API 的语法糖里面定义的变量可以在模板中直接使用。ref用来创建响应式数据当message.value改变时页面上的{{ message }}会自动更新。2.4 学习环境与生产环境的区别开发阶段使用npm run dev启动的是开发服务器特点是自动热更新、报错信息清晰。但它并不适合直接作为生产环境部署。当项目开发完成后需要执行npm run build执行后Vite 会把项目打包到dist目录生成静态的 HTML、CSS、JavaScript 文件。这些文件才能交给 Nginx、云服务器或 CDN 部署。学习环境你只需要关心代码能不能运行生产环境还需要额外关心路由模式、接口跨域、环境变量、日志上报、回滚方案等问题。这些会在后面的部署检查清单中展开。3. 从模板语法到组件通信1.5 小时写出你的第一个交互页面3.1 模板语法与响应式数据Vue3 模板语法和 HTML 非常接近区别是你可以在模板中使用{{ }}插入数据使用v-bind绑定属性使用v-on监听事件。写一个最常用的组合示例template div p{{ title }}/p input v-modelkeyword placeholder请输入搜索词 / button clickhandleSearch搜索/button /div /template script setup import { ref } from vue const title ref(Vue3 快速入门) const keyword ref() function handleSearch() { alert(搜索内容 keyword.value) } /scriptv-model是实现表单输入框和数据双向绑定的指令。用户在输入框中输入内容keyword.value会同步变化反过来如果你在代码中修改keyword.value输入框内容也会同步更新。click是v-on:click的简写绑定点击事件处理函数。在组合式 API 中事件处理函数可以直接是普通函数不需要像 Vue2 那样挂到methods中。3.2 计算属性与监听器页面中经常需要根据已有数据计算新数据例如电商购物车里的总价。你当然可以在模板里写一行表达式但当计算逻辑变复杂时应该把它放到computed里。script setup import { ref, computed } from vue const price ref(100) const count ref(2) const total computed(() price.value * count.value) /script template div单价{{ price }}/div div数量{{ count }}/div div总价{{ total }}/div /templatecomputed计算属性有两个特点有缓存只要依赖的数据没有变化多次访问不会重复执行计算函数。依赖跟踪当price或count发生变化total才会重新计算。如果要在数据变化后执行一些副作用比如打印日志、请求接口应该使用watchimport { ref, watch } from vue const keyword ref() watch(keyword, (newValue, oldValue) { console.log(搜索词从, oldValue, 变成, newValue) })初学者最容易混淆的点是computed用来计算新值watch用来响应变化。两者不要互相替代。3.3 组件化开发父子组件通信组件是 Vue3 的核心思想之一。你可以把页面拆成头部、列表、弹窗等独立组件每个组件负责自己的数据和样式再通过嵌套组合成完整页面。父子组件之间最常见的通信方式是父组件通过props向子组件传数据。子组件通过emit向父组件发送事件。创建一个子组件src/components/Child.vuetemplate div p{{ name }}/p button clickhandleClick触发事件/button /div /template script setup defineProps({ name: { type: String, default: } }) const emit defineEmits([send]) function handleClick() { emit(send, 来自子组件的消息) } /script在App.vue中引入并使用script setup import Child from ./components/Child.vue function handleSend(msg) { alert(msg) } /script template Child nameVue3 子组件 sendhandleSend / /templatedefineProps和defineEmits是script setup中的编译宏不需要额外导入。它们的作用是声明组件接收哪些属性和可以触发哪些事件。这里要注意props是单向数据流子组件不应该直接修改props。如果真的需要修改应该通过emit让父组件去改。3.4 一个最小待办事项页面把上面几个知识点组合起来写一个最简单的待办事项页面。它覆盖了响应式数据、计算属性、事件处理、表单绑定、列表渲染。script setup import { ref, computed } from vue const todoList ref([ { id: 1, text: 搭建 Vue3 项目, done: false }, { id: 2, text: 完成第一个组件, done: false } ]) const newTodo ref() const remaining computed(() { return todoList.value.filter(item !item.done).length }) function addTodo() { const text newTodo.value.trim() if (!text) return todoList.value.push({ id: Date.now(), text, done: false }) newTodo.value } function toggleTodo(id) { const item todoList.value.find(item item.id id) if (item) { item.done !item.done } } /script template div h1Vue3 待办清单/h1 input v-modelnewTodo placeholder输入新任务 / button clickaddTodo添加/button ul li v-foritem in todoList :keyitem.id input typecheckbox v-modelitem.done / span :class{ done: item.done }{{ item.text }}/span /li /ul p剩余 {{ remaining }} 条未完成/p /div /template style scoped .done { text-decoration: line-through; } /style这段代码中v-for用来循环渲染数组:key用来给列表中的每一项提供一个唯一标识这样 Vue 在更新列表时可以准确复用和移除元素。item.id使用Date.now()生成在简单示例中够用真实项目建议使用后端返回的唯一 id。style scoped表示样式只作用于当前组件避免组件之间的样式互相污染。运行这段代码后你会看到一个可以添加任务、勾选完成、统计剩余条数的小页面。到这里Vue3 最核心的本地交互能力已经基本掌握了。4. 进阶必会Composition API、路由、状态管理与请求封装4.1 理解 Composition API而不是背 APIVue3 组合式 API 最重要的价值是逻辑复用。组件一复杂如果所有功能都写在同一个组件里会出现几百行的窘境。组合式 API 允许你把相关逻辑抽成独立函数。例如抽一个计数器逻辑src/useCount.jsimport { ref } from vue export function useCount() { const count ref(0) function increment() { count.value } return { count, increment } }组件中使用script setup import { useCount } from ./useCount const { count, increment } useCount() /script template button clickincrement{{ count }}/button /template这样你就可以在多个组件中复用useCount而不是重复写逻辑。面试中常说的“逻辑组合式复用”就是这个意思。零基础阶段不要急着把所有 API 都记住先掌握ref、reactive、computed、watch再理解props、emit最后学会用script setup组织代码就已经覆盖了 80% 的日常开发。4.2 生命周期函数在 Vue3 中的写法生命周期可以理解成组件在不同阶段触发的事件。组合式 API 中生命周期函数统一以on开头并且在setup中调用。Vue2 选项式Vue3 组合式触发时机created直接在 setup 中写组件初始化前mountedonMountedDOM 挂载完成适合发请求updatedonUpdated数据变化导致视图重新渲染后destroyedonUnmounted组件销毁适合清理定时器常用示例script setup import { onMounted, onUnmounted } from vue onMounted(() { console.log(组件挂载完成) }) onUnmounted(() { console.log(组件卸载) }) /scriptonMounted是初学者最常用的生命周期因为页面加载后需要请求接口的场景很常见。注意不要在onMounted里做太多和 DOM 无关的计算优先把数据初始化放在setup中。4.3 用 Vue Router 实现页面跳转单页应用不能像传统网站那样用多个 HTML 文件跳转需要借助路由来切换组件。Vue Router 是 Vue3 官方推荐的路由方案。安装npm install vue-router4创建src/router/index.jsimport { createRouter, createWebHistory } from vue-router import Home from ../views/Home.vue import About from ../views/About.vue const router createRouter({ history: createWebHistory(), routes: [ { path: /, component: Home }, { path: /about, component: About } ] }) export default router在src/main.js中注册import { createApp } from vue import App from ./App.vue import router from ./router createApp(App).use(router).mount(#app)然后在模板中使用template div RouterLink to/首页/RouterLink RouterLink to/about关于/RouterLink RouterView / /div /templateRouterLink负责生成跳转链接RouterView负责渲染当前路由对应的组件。这里有个非常重要的点createWebHistory使用 HTML5 history 模式路径干净但在生产环境直接访问子路径时如果服务器没有配置重写规则会出现 404。零基础学习阶段如果不想折腾服务器配置可以先使用createWebHashHistory路径会变成/#/about刷新不会 404。4.4 用 Pinia 管理全局状态如果多个组件需要共享登录状态、用户信息、购物车数据逐层通过props和emit传递会非常痛苦。Pinia 是 Vue3 推荐的状态管理库用来保存全局数据。安装npm install pinia创建src/stores/user.jsimport { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ token: , nickname: }), actions: { setUser(token, nickname) { this.token token this.nickname nickname } } })在组件中使用import { useUserStore } from ../stores/user const userStore useUserStore() userStore.setUser(abc123, 小明)Pinia 的使用思路很直观用useUserStore()拿到 store 实例然后读取或修改里面的状态。对比起来Pinia 比 Vuex 简单没有那么多概念对零基础更友好。4.5 Axios 请求封装Vue 本身不负责发 HTTP 请求通常会搭配 Axios 使用。真实项目中不会在每个组件里直接调用axios.get而是在最外层封装一个统一的请求工具用来设置接口地址、处理 token、统一处理错误。安装npm install axios创建src/utils/request.jsimport axios from axios const request axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) request.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { window.location.href /login } return Promise.reject(error) } ) export default request组件中使用import request from ../utils/request const list ref([]) async function fetchList() { const res await request.get(/todo/list) list.value res.data }这里把请求结果直接解包为response.data组件里拿到的就是业务数据判断逻辑更简洁。import.meta.env.VITE_API_BASE_URL是 Vite 读取环境变量的方式你需要在自己的.env文件中定义它才能实现不同环境使用不同接口地址。4.6 实际项目中常见的热门扩展点掌握了基础之后你会在真实项目和面试题里反复看到以下扩展点动态路由根据用户权限动态添加路由常用于后台管理系统。自定义指令例如按钮权限指令v-permission控制元素是否渲染。强制更新通过修改 key 或调用nextTick处理视图没有及时更新的场景。组件库集成Element Plus、Vant 等能大幅加快页面开发速度。国际化使用 vue-i18n 处理多语言。富文本编辑器vue-quill-editor、wangEditor 等需要在 Vue3 中确认对应版本。这些内容不需要在入门第一天全部掌握但可以作为后续学习地图。入门阶段最重要的仍是把响应式、组件、路由、状态管理这几条主线打通。5. 运行验证与报错排查从现象到根因的完整路径5.1 验证程序是否真正可用的三个入口很多初学者看到页面能显示就算成功但实际开发中还要验证交互、网络和状态是否正确。下面三个入口是最常用的验证方式。第一个是浏览器控制台。在组件代码里打印关键数据确认数据是否符合预期console.log(todoList, todoList.value) console.log(remaining, remaining.value)第二个是 Vue Devtools。它是一款浏览器插件安装后打开开发者工具会多出一个 Vue 面板可以查看组件树、props、响应式数据和 Pinia 状态。遇到“页面上没显示但数据应该存在”的问题先到这里确认数据是否真的存在。第三个是 Network 面板。如果页面调用了接口切换到 Network 标签刷新页面查看请求状态。如果接口返回 500 或 404问题大概率不在前端视图而在接口地址、参数或后端服务。验证顺序建议是先看控制台有没有报错再看 Vue Devtools 里的数据最后看 Network 里的请求。大多数问题都能在这三步里定位。5.2 三个高频 Vue3 报错和解决方法报错是入门过程中最正常的现象关键是掌握从现象倒推根因的方法。下面三个是零基础阶段最高频的问题。问题现象常见原因检查方式解决方案Failed to resolve component组件没有正确导入或注册名称不一致查看 import 路径、文件名、控制台警告确认组件导出方式默认导出用import Child from ./Child.vueCannot read properties of undefined数据初始值是空异步数据还未返回就访问了内部字段打印接口响应查看数据层级给数据初始化默认值使用可选链?.或v-if判断v-for 渲染缺少 key列表渲染没有指定:key浏览器控制台看 Warning给每一项绑定一个稳定的唯一 id其中一个非常典型的错误是接口返回的数据结构是{ data: { list: [...] } }但你直接访问res.list结果就是 undefined。这时候不要怀疑 Vue 有问题先打印res看清楚结构再写访问路径。5.3 生产环境发布前的检查清单开发环境跑通后生产环境部署还需要额外确认下面这些点执行npm run build确认构建是否通过产物是否生成到dist目录。如果使用createWebHistory后端服务器需要把不存在的路由重写到index.html。接口跨域问题开发环境可以通过 Vite proxy 解决生产环境一般通过 Nginx 反向代理或后端开启 CORS。环境变量区分开发、测试、生产环境不要在生产环境使用测试库地址。清理调试代码去掉多余的console.log避免敏感信息暴露。资源路径如果部署在子目录需要修改 Vite 的base配置否则 CSS、JS 路径会不对。监控和回滚记录发布版本保留上一个构建产物出问题时能快速回滚。这些清单不是入门第一天就要做完但一旦你要把 Vue3 项目推到线上就必须逐项检查。5.4 面试中常考的 Vue3 知识边界这篇文章并不以面试培训为核心但很多零基础学习者最终会走向前端岗位面试题是最直接的自测方式。建议学习完基础后能用自己的话回答下面几个问题ref和reactive有什么区别computed和watch有什么区别v-if和v-show有什么区别Vue3 组件通信有哪些方式Vue Routerhistory 模式和 hash 模式有什么区别Pinia 和 Vuex 的核心差异是什么如果这些问题大部分能回答出来说明你已经不是小白级别而是具备了 Vue3 开发者的基本知识边界。6. 5小时学习路线安排与最佳实践建议6.1 5小时时间分配表“5小时学会 Vue3”并不是一个绝对保证而是一套高效的学习节奏。如果完全零基础建议按照下面表格分配时间。时间段学习内容需要完成的产出物30 分钟理解 Vue3 概念、响应式、组件化能在纸上画出 Vue3 数据流图60 分钟安装 Node.js、创建项目、运行默认页浏览器打开 Vue3 欢迎页90 分钟模板语法、响应式、计算属性、事件、v-model完成一个带输入框和按钮的页面60 分钟组件通信、Composition API 逻辑复用父子组件传参抽取一个复用函数60 分钟路由、Pinia、Axios 请求完成一个登录页面跳转和列表请求30 分钟调试工具、报错排查、复习总结能独立解决一个常见报错这个安排是循序渐进的。千万不要在前 30 分钟去研究Proxy源码也不要一开始就陷入组件库文档先把最小闭环跑通。6.2 零基础最容易踩的 3 个坑第一个坑在 JavaScript 中使用ref时忘记写.value。模板中{{ count }}会自动解包但setup里访问count必须写成count.value。错误写法是const count ref(0) function increment() { count // 错误count 是 ref 对象不能直接 }正确写法function increment() { count.value }第二个坑解构reactive对象后丢失响应式。const state reactive({ count: 0 }) // 错误解构出来的 count 不再是响应式 const { count } state如果确实需要解构可以使用toRefs或者干脆用多个ref。入门阶段推荐先用ref等熟悉了再根据场景选择reactive。第三个坑在setup中使用this。Vue3 组合式 API 中setup在执行时组件实例还未完全创建this不是指向组件而是undefined。因此不要在setup里写setup() { console.log(this) // undefined }使用script setup时没有这个问题因为它会自动处理上下文。你只需要把要使用的数据和函数像普通 JavaScript 那样定义即可。6.3 从入门到精通的进阶路径如果你已经完成了上面 5 小时路线下一步就应该进入项目实战。推荐按下面顺序进阶先做一个后台管理系统包含登录、动态菜单、列表查询、权限控制。引入 TypeScript提升代码的可维护性和类型安全。学习组件库 Element Plus快速搭建后台页面。理解 Vite 配置掌握代理、别名、打包优化。学习 Nuxt 或服务端渲染相关方案应对 SEO 场景。关注性能优化了解懒加载、虚拟列表、响应式监听粒度。这个过程中动态路由、自定义指令、后台管理系统、组件封装这些常见业务场景会反复出现。你接触到的知识会从“能用”变成“好用”再到能应对复杂业务。6.4 给零基础学习者的实践建议学 Vue3 最容易犯的错误是只看视频、不动手。5 小时学习路线的最后 30 分钟建议不要停留在“我看懂了”的状态而是关掉教程自己从创建项目开始把待办事项页面重新写一遍。第一次写不出很正常的卡住就翻笔记再写第二次直到不依赖参考也能完成。练习时可以选择一个明确的小目标比如做一个能添加、删除、筛选的待办事项应用。做一个调接口展示新闻列表的页面。做一个带登录页和首页跳转的小后台。每完成一个你的 Vue3 知识就会更立体。真正让你“学会”的不是教程里的知识密度而是你在处理“数据为什么没更新”“请求为什么没发出去”“组件为什么没渲染”这类问题后积累起来的排查能力。 
长河君 · 2026/9/1 3:55:17 · 阅读 1.2k Vue3零基础5小时快速入门：从环境搭建到项目实战
Vue3 是目前 Web 前端开发中非常主流的前端框架之一它不只是在 Vue2 的基础上做一次小规模升级而是从响应式机制、组件逻辑组织到工程化体验都做了整套更新。对零基础准备进入 Web 前端方向的人来说直接学习 Vue3 往往比从 Vue2 过渡更划算因为新项目、官方文档、社区组件库都在向 Vue3 集中。这篇教程围绕一个明确目标展开让零基础的人在 5 小时内完成“认知建立、环境搭建、核心语法、组件通信、路由状态、问题排查”这一整条链路。学完之后你能看懂 Vue3 项目结构能写出一个带交互、能发请求、能跳转页面的小应用也知道出了问题该看哪一层。这里不会把全部 API 列一遍而是优先讲清楚最常用的部分并把容易踩的坑放在最后统一说明。1. Vue3 零基础入门先用 30 分钟建立正确认知1.1 Vue3 到底是什么解决了什么问题Vue3 是一个用于构建用户界面的渐进式前端框架。通俗地说它帮助你用更少的代码把数据变成页面并且在数据发生变化时页面能自动更新。传统开发中如果你要修改页面上的一段文字通常要先通过 id 找到 DOM 元素再手动更新内容Vue 的做法则简单得多你只需维护一个数据变量数据变化后 Vue 负责同步视图。Vue 被称为“渐进式”意思是你可以从一个页面里的一个小组件开始使用也可以逐步引入路由、状态管理、构建工具最终做成一个完整企业级项目。这种特性对零基础学习者非常友好入门时不需要一次掌握全部概念先会用再逐步理解内部机制。从技术定义看Vue3 的核心能力包括三部分响应式系统数据变化自动触发视图更新。组件化页面拆成独立、可复用、可组合的组件。虚拟 DOM 与渲染器高效对比新旧状态最小化操作真实 DOM。零基础阶段不需要深入源码但要有一个意识你写的ref、reactive不是普通变量它们是 Vue 用来跟踪变化的关键对象。理解这一点后续遇到“为什么界面没更新”时就有排查方向。1.2 Vue3 相比 Vue2 的变化初学者只需要记住这几点网上很多资料会对比 Vue2 和 Vue3真正零基础的人不需要记住全部差异只需要先掌握下面这几个关键点因为它们直接影响代码写法。对比项Vue2 常见方式Vue3 常见方式初学者要关注的点响应式原理Object.defineProperty劫持属性Proxy代理整个对象Vue3 能监听新增属性和删除属性用起来比 Vue2 更省心逻辑组织data、methods、computed分块setup/script setup组合式写法相关逻辑可以放一起业务复杂后更容易维护生命周期created、mounted、destroyedonMounted、onUnmounted等函数名前加了on需要在 setup 中调用组件根节点模板只能有一个根节点支持多个根节点写模板时不必再额外包一层 div响应式 API组件里直接用this.xxxref、reactive定义数据组合式 API 中没有this不要混用旧习惯其中最重要的一点是Vue3 推荐使用组合式 APIComposition API。你可能会在旧项目里看到 Options API 写法也就是data、methods分开写。但新项目、新教程基本都使用script setup本文后续示例也统一采用这种写法。1.3 零基础学好 Vue3 需要的前置知识清单虽然标题说“零基础”但 Vue3 并不是完全不需要 JavaScript 基础。你可以先把下面这份清单当成自检表不用全部精通但至少要在看到代码时知道它是什么。知识点需要掌握到什么程度原因HTML 标签和属性能看懂 div、span、input、button、formVue 模板本质是 HTML 的扩展CSS 基础能写 class、改样式组件样式隔离和页面布局靠它JavaScript 基础变量、函数、数组、对象、条件、循环响应式数据、事件处理、接口请求都建立在 JS 上ES6 常用语法let、const、箭头函数、模板字符串、模块导入导出组合式 API 大量使用这些语法浏览器开发者工具能打开控制台、查看 Elements、Network验证结果、排查报错的基本功如果上面有几项还比较陌生不用暂停学习。在动手写 Vue3 代码的过程中自然会遇到再回头补基础即可。最理想的状态是先会用再理解原理最后再系统性补基础。2. 开发环境搭建1 小时内准备好一个可运行的 Vue3 项目2.1 安装 Node.js 和包管理器Vue3 项目通常需要 Node.js 环境因为 Vite 开发服务器和依赖安装都依赖它。你不需要懂 Node.js 后端开发只需要把它当成 Vue3 的运行环境来安装。安装完成后打开终端或命令行执行以下命令确认环境正常node -v npm -v推荐使用 Node.js 的 LTS 版本因为稳定兼容性好。如果执行命令后提示找不到命令说明 Node.js 没有成功安装或安装后没有重启终端。npm 是 Node.js 自带的包管理器用来安装 Vue、Vue Router、Axios 等第三方库。除 npm 外前端社区还常用 pnpm 和 yarn它们安装速度不同但使用思路一致。零基础阶段先用 npm 就够了完全能跑通所有示例。2.2 用 Vite 创建 Vue3 项目并启动Vite 是目前 Vue3 项目最常用的构建工具它的特点是启动极快开发体验好。打开终端进入你想存放项目的目录然后执行npm create vitelatest vue3-demo -- --template vue执行后Vite 会创建一个名为vue3-demo的目录并生成一个 Vue 基础模板。接着进入目录安装依赖cd vue3-demo npm install npm run dev如果在某些 npm 版本下上面的--template写法不生效也可以使用 Vue 官方提供的脚手架命令交互式选择功能npm create vuelatest vue3-demo这个命令会询问你是否需要 TypeScript、Vue Router、Pinia 等零基础学习阶段可以先全选 No保持最小化项目越简单越容易理解。启动成功后终端会输出一个本地地址通常是http://localhost:5173打开浏览器访问这个地址如果看到 Vue 的默认欢迎页说明环境已经跑通。2.3 项目结构、关键文件与启动验证创建出来的vue3-demo目录结构比较精简初学者先关注这几个部分vue3-demo ├── index.html ├── package.json ├── vite.config.js ├── public └── src ├── main.js ├── App.vue ├── components └── assetsindex.html是浏览器真正加载的入口页面。Vite会把src/main.js编译后注入到这个页面中。src/main.js是整个应用的入口核心代码是创建 Vue 实例并挂载到页面import { createApp } from vue import App from ./App.vue import ./assets/main.css createApp(App).mount(#app)src/App.vue是根组件。你可以把它理解成一个页面容器后续所有组件都会从这里开始组合。修改App.vue改成最简单的 Hello Vue3script setup import { ref } from vue const message ref(Hello Vue3) /script template h1{{ message }}/h1 /template保存后浏览器会自动刷新看到页面上显示Hello Vue3说明你已经成功修改了第一个 Vue3 组件。这里的关键是script setup它是 Vue3 组合式 API 的语法糖里面定义的变量可以在模板中直接使用。ref用来创建响应式数据当message.value改变时页面上的{{ message }}会自动更新。2.4 学习环境与生产环境的区别开发阶段使用npm run dev启动的是开发服务器特点是自动热更新、报错信息清晰。但它并不适合直接作为生产环境部署。当项目开发完成后需要执行npm run build执行后Vite 会把项目打包到dist目录生成静态的 HTML、CSS、JavaScript 文件。这些文件才能交给 Nginx、云服务器或 CDN 部署。学习环境你只需要关心代码能不能运行生产环境还需要额外关心路由模式、接口跨域、环境变量、日志上报、回滚方案等问题。这些会在后面的部署检查清单中展开。3. 从模板语法到组件通信1.5 小时写出你的第一个交互页面3.1 模板语法与响应式数据Vue3 模板语法和 HTML 非常接近区别是你可以在模板中使用{{ }}插入数据使用v-bind绑定属性使用v-on监听事件。写一个最常用的组合示例template div p{{ title }}/p input v-modelkeyword placeholder请输入搜索词 / button clickhandleSearch搜索/button /div /template script setup import { ref } from vue const title ref(Vue3 快速入门) const keyword ref() function handleSearch() { alert(搜索内容 keyword.value) } /scriptv-model是实现表单输入框和数据双向绑定的指令。用户在输入框中输入内容keyword.value会同步变化反过来如果你在代码中修改keyword.value输入框内容也会同步更新。click是v-on:click的简写绑定点击事件处理函数。在组合式 API 中事件处理函数可以直接是普通函数不需要像 Vue2 那样挂到methods中。3.2 计算属性与监听器页面中经常需要根据已有数据计算新数据例如电商购物车里的总价。你当然可以在模板里写一行表达式但当计算逻辑变复杂时应该把它放到computed里。script setup import { ref, computed } from vue const price ref(100) const count ref(2) const total computed(() price.value * count.value) /script template div单价{{ price }}/div div数量{{ count }}/div div总价{{ total }}/div /templatecomputed计算属性有两个特点有缓存只要依赖的数据没有变化多次访问不会重复执行计算函数。依赖跟踪当price或count发生变化total才会重新计算。如果要在数据变化后执行一些副作用比如打印日志、请求接口应该使用watchimport { ref, watch } from vue const keyword ref() watch(keyword, (newValue, oldValue) { console.log(搜索词从, oldValue, 变成, newValue) })初学者最容易混淆的点是computed用来计算新值watch用来响应变化。两者不要互相替代。3.3 组件化开发父子组件通信组件是 Vue3 的核心思想之一。你可以把页面拆成头部、列表、弹窗等独立组件每个组件负责自己的数据和样式再通过嵌套组合成完整页面。父子组件之间最常见的通信方式是父组件通过props向子组件传数据。子组件通过emit向父组件发送事件。创建一个子组件src/components/Child.vuetemplate div p{{ name }}/p button clickhandleClick触发事件/button /div /template script setup defineProps({ name: { type: String, default: } }) const emit defineEmits([send]) function handleClick() { emit(send, 来自子组件的消息) } /script在App.vue中引入并使用script setup import Child from ./components/Child.vue function handleSend(msg) { alert(msg) } /script template Child nameVue3 子组件 sendhandleSend / /templatedefineProps和defineEmits是script setup中的编译宏不需要额外导入。它们的作用是声明组件接收哪些属性和可以触发哪些事件。这里要注意props是单向数据流子组件不应该直接修改props。如果真的需要修改应该通过emit让父组件去改。3.4 一个最小待办事项页面把上面几个知识点组合起来写一个最简单的待办事项页面。它覆盖了响应式数据、计算属性、事件处理、表单绑定、列表渲染。script setup import { ref, computed } from vue const todoList ref([ { id: 1, text: 搭建 Vue3 项目, done: false }, { id: 2, text: 完成第一个组件, done: false } ]) const newTodo ref() const remaining computed(() { return todoList.value.filter(item !item.done).length }) function addTodo() { const text newTodo.value.trim() if (!text) return todoList.value.push({ id: Date.now(), text, done: false }) newTodo.value } function toggleTodo(id) { const item todoList.value.find(item item.id id) if (item) { item.done !item.done } } /script template div h1Vue3 待办清单/h1 input v-modelnewTodo placeholder输入新任务 / button clickaddTodo添加/button ul li v-foritem in todoList :keyitem.id input typecheckbox v-modelitem.done / span :class{ done: item.done }{{ item.text }}/span /li /ul p剩余 {{ remaining }} 条未完成/p /div /template style scoped .done { text-decoration: line-through; } /style这段代码中v-for用来循环渲染数组:key用来给列表中的每一项提供一个唯一标识这样 Vue 在更新列表时可以准确复用和移除元素。item.id使用Date.now()生成在简单示例中够用真实项目建议使用后端返回的唯一 id。style scoped表示样式只作用于当前组件避免组件之间的样式互相污染。运行这段代码后你会看到一个可以添加任务、勾选完成、统计剩余条数的小页面。到这里Vue3 最核心的本地交互能力已经基本掌握了。4. 进阶必会Composition API、路由、状态管理与请求封装4.1 理解 Composition API而不是背 APIVue3 组合式 API 最重要的价值是逻辑复用。组件一复杂如果所有功能都写在同一个组件里会出现几百行的窘境。组合式 API 允许你把相关逻辑抽成独立函数。例如抽一个计数器逻辑src/useCount.jsimport { ref } from vue export function useCount() { const count ref(0) function increment() { count.value } return { count, increment } }组件中使用script setup import { useCount } from ./useCount const { count, increment } useCount() /script template button clickincrement{{ count }}/button /template这样你就可以在多个组件中复用useCount而不是重复写逻辑。面试中常说的“逻辑组合式复用”就是这个意思。零基础阶段不要急着把所有 API 都记住先掌握ref、reactive、computed、watch再理解props、emit最后学会用script setup组织代码就已经覆盖了 80% 的日常开发。4.2 生命周期函数在 Vue3 中的写法生命周期可以理解成组件在不同阶段触发的事件。组合式 API 中生命周期函数统一以on开头并且在setup中调用。Vue2 选项式Vue3 组合式触发时机created直接在 setup 中写组件初始化前mountedonMountedDOM 挂载完成适合发请求updatedonUpdated数据变化导致视图重新渲染后destroyedonUnmounted组件销毁适合清理定时器常用示例script setup import { onMounted, onUnmounted } from vue onMounted(() { console.log(组件挂载完成) }) onUnmounted(() { console.log(组件卸载) }) /scriptonMounted是初学者最常用的生命周期因为页面加载后需要请求接口的场景很常见。注意不要在onMounted里做太多和 DOM 无关的计算优先把数据初始化放在setup中。4.3 用 Vue Router 实现页面跳转单页应用不能像传统网站那样用多个 HTML 文件跳转需要借助路由来切换组件。Vue Router 是 Vue3 官方推荐的路由方案。安装npm install vue-router4创建src/router/index.jsimport { createRouter, createWebHistory } from vue-router import Home from ../views/Home.vue import About from ../views/About.vue const router createRouter({ history: createWebHistory(), routes: [ { path: /, component: Home }, { path: /about, component: About } ] }) export default router在src/main.js中注册import { createApp } from vue import App from ./App.vue import router from ./router createApp(App).use(router).mount(#app)然后在模板中使用template div RouterLink to/首页/RouterLink RouterLink to/about关于/RouterLink RouterView / /div /templateRouterLink负责生成跳转链接RouterView负责渲染当前路由对应的组件。这里有个非常重要的点createWebHistory使用 HTML5 history 模式路径干净但在生产环境直接访问子路径时如果服务器没有配置重写规则会出现 404。零基础学习阶段如果不想折腾服务器配置可以先使用createWebHashHistory路径会变成/#/about刷新不会 404。4.4 用 Pinia 管理全局状态如果多个组件需要共享登录状态、用户信息、购物车数据逐层通过props和emit传递会非常痛苦。Pinia 是 Vue3 推荐的状态管理库用来保存全局数据。安装npm install pinia创建src/stores/user.jsimport { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ token: , nickname: }), actions: { setUser(token, nickname) { this.token token this.nickname nickname } } })在组件中使用import { useUserStore } from ../stores/user const userStore useUserStore() userStore.setUser(abc123, 小明)Pinia 的使用思路很直观用useUserStore()拿到 store 实例然后读取或修改里面的状态。对比起来Pinia 比 Vuex 简单没有那么多概念对零基础更友好。4.5 Axios 请求封装Vue 本身不负责发 HTTP 请求通常会搭配 Axios 使用。真实项目中不会在每个组件里直接调用axios.get而是在最外层封装一个统一的请求工具用来设置接口地址、处理 token、统一处理错误。安装npm install axios创建src/utils/request.jsimport axios from axios const request axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) request.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { window.location.href /login } return Promise.reject(error) } ) export default request组件中使用import request from ../utils/request const list ref([]) async function fetchList() { const res await request.get(/todo/list) list.value res.data }这里把请求结果直接解包为response.data组件里拿到的就是业务数据判断逻辑更简洁。import.meta.env.VITE_API_BASE_URL是 Vite 读取环境变量的方式你需要在自己的.env文件中定义它才能实现不同环境使用不同接口地址。4.6 实际项目中常见的热门扩展点掌握了基础之后你会在真实项目和面试题里反复看到以下扩展点动态路由根据用户权限动态添加路由常用于后台管理系统。自定义指令例如按钮权限指令v-permission控制元素是否渲染。强制更新通过修改 key 或调用nextTick处理视图没有及时更新的场景。组件库集成Element Plus、Vant 等能大幅加快页面开发速度。国际化使用 vue-i18n 处理多语言。富文本编辑器vue-quill-editor、wangEditor 等需要在 Vue3 中确认对应版本。这些内容不需要在入门第一天全部掌握但可以作为后续学习地图。入门阶段最重要的仍是把响应式、组件、路由、状态管理这几条主线打通。5. 运行验证与报错排查从现象到根因的完整路径5.1 验证程序是否真正可用的三个入口很多初学者看到页面能显示就算成功但实际开发中还要验证交互、网络和状态是否正确。下面三个入口是最常用的验证方式。第一个是浏览器控制台。在组件代码里打印关键数据确认数据是否符合预期console.log(todoList, todoList.value) console.log(remaining, remaining.value)第二个是 Vue Devtools。它是一款浏览器插件安装后打开开发者工具会多出一个 Vue 面板可以查看组件树、props、响应式数据和 Pinia 状态。遇到“页面上没显示但数据应该存在”的问题先到这里确认数据是否真的存在。第三个是 Network 面板。如果页面调用了接口切换到 Network 标签刷新页面查看请求状态。如果接口返回 500 或 404问题大概率不在前端视图而在接口地址、参数或后端服务。验证顺序建议是先看控制台有没有报错再看 Vue Devtools 里的数据最后看 Network 里的请求。大多数问题都能在这三步里定位。5.2 三个高频 Vue3 报错和解决方法报错是入门过程中最正常的现象关键是掌握从现象倒推根因的方法。下面三个是零基础阶段最高频的问题。问题现象常见原因检查方式解决方案Failed to resolve component组件没有正确导入或注册名称不一致查看 import 路径、文件名、控制台警告确认组件导出方式默认导出用import Child from ./Child.vueCannot read properties of undefined数据初始值是空异步数据还未返回就访问了内部字段打印接口响应查看数据层级给数据初始化默认值使用可选链?.或v-if判断v-for 渲染缺少 key列表渲染没有指定:key浏览器控制台看 Warning给每一项绑定一个稳定的唯一 id其中一个非常典型的错误是接口返回的数据结构是{ data: { list: [...] } }但你直接访问res.list结果就是 undefined。这时候不要怀疑 Vue 有问题先打印res看清楚结构再写访问路径。5.3 生产环境发布前的检查清单开发环境跑通后生产环境部署还需要额外确认下面这些点执行npm run build确认构建是否通过产物是否生成到dist目录。如果使用createWebHistory后端服务器需要把不存在的路由重写到index.html。接口跨域问题开发环境可以通过 Vite proxy 解决生产环境一般通过 Nginx 反向代理或后端开启 CORS。环境变量区分开发、测试、生产环境不要在生产环境使用测试库地址。清理调试代码去掉多余的console.log避免敏感信息暴露。资源路径如果部署在子目录需要修改 Vite 的base配置否则 CSS、JS 路径会不对。监控和回滚记录发布版本保留上一个构建产物出问题时能快速回滚。这些清单不是入门第一天就要做完但一旦你要把 Vue3 项目推到线上就必须逐项检查。5.4 面试中常考的 Vue3 知识边界这篇文章并不以面试培训为核心但很多零基础学习者最终会走向前端岗位面试题是最直接的自测方式。建议学习完基础后能用自己的话回答下面几个问题ref和reactive有什么区别computed和watch有什么区别v-if和v-show有什么区别Vue3 组件通信有哪些方式Vue Routerhistory 模式和 hash 模式有什么区别Pinia 和 Vuex 的核心差异是什么如果这些问题大部分能回答出来说明你已经不是小白级别而是具备了 Vue3 开发者的基本知识边界。6. 5小时学习路线安排与最佳实践建议6.1 5小时时间分配表“5小时学会 Vue3”并不是一个绝对保证而是一套高效的学习节奏。如果完全零基础建议按照下面表格分配时间。时间段学习内容需要完成的产出物30 分钟理解 Vue3 概念、响应式、组件化能在纸上画出 Vue3 数据流图60 分钟安装 Node.js、创建项目、运行默认页浏览器打开 Vue3 欢迎页90 分钟模板语法、响应式、计算属性、事件、v-model完成一个带输入框和按钮的页面60 分钟组件通信、Composition API 逻辑复用父子组件传参抽取一个复用函数60 分钟路由、Pinia、Axios 请求完成一个登录页面跳转和列表请求30 分钟调试工具、报错排查、复习总结能独立解决一个常见报错这个安排是循序渐进的。千万不要在前 30 分钟去研究Proxy源码也不要一开始就陷入组件库文档先把最小闭环跑通。6.2 零基础最容易踩的 3 个坑第一个坑在 JavaScript 中使用ref时忘记写.value。模板中{{ count }}会自动解包但setup里访问count必须写成count.value。错误写法是const count ref(0) function increment() { count // 错误count 是 ref 对象不能直接 }正确写法function increment() { count.value }第二个坑解构reactive对象后丢失响应式。const state reactive({ count: 0 }) // 错误解构出来的 count 不再是响应式 const { count } state如果确实需要解构可以使用toRefs或者干脆用多个ref。入门阶段推荐先用ref等熟悉了再根据场景选择reactive。第三个坑在setup中使用this。Vue3 组合式 API 中setup在执行时组件实例还未完全创建this不是指向组件而是undefined。因此不要在setup里写setup() { console.log(this) // undefined }使用script setup时没有这个问题因为它会自动处理上下文。你只需要把要使用的数据和函数像普通 JavaScript 那样定义即可。6.3 从入门到精通的进阶路径如果你已经完成了上面 5 小时路线下一步就应该进入项目实战。推荐按下面顺序进阶先做一个后台管理系统包含登录、动态菜单、列表查询、权限控制。引入 TypeScript提升代码的可维护性和类型安全。学习组件库 Element Plus快速搭建后台页面。理解 Vite 配置掌握代理、别名、打包优化。学习 Nuxt 或服务端渲染相关方案应对 SEO 场景。关注性能优化了解懒加载、虚拟列表、响应式监听粒度。这个过程中动态路由、自定义指令、后台管理系统、组件封装这些常见业务场景会反复出现。你接触到的知识会从“能用”变成“好用”再到能应对复杂业务。6.4 给零基础学习者的实践建议学 Vue3 最容易犯的错误是只看视频、不动手。5 小时学习路线的最后 30 分钟建议不要停留在“我看懂了”的状态而是关掉教程自己从创建项目开始把待办事项页面重新写一遍。第一次写不出很正常的卡住就翻笔记再写第二次直到不依赖参考也能完成。练习时可以选择一个明确的小目标比如做一个能添加、删除、筛选的待办事项应用。做一个调接口展示新闻列表的页面。做一个带登录页和首页跳转的小后台。每完成一个你的 Vue3 知识就会更立体。真正让你“学会”的不是教程里的知识密度而是你在处理“数据为什么没更新”“请求为什么没发出去”“组件为什么没渲染”这类问题后积累起来的排查能力。