1. 先搞清楚“2小时速成”到底能学到什么以及它适合谁如果你看到“2小时Vue3零基础速成”这个标题第一反应可能是怀疑两小时真的能学会一个前端框架吗我的答案是能但前提是目标要明确。这里的“学会”不是让你成为Vue3专家也不是让你能独立开发复杂的企业级应用而是让你在最短时间内跑通一个能用的Vue3项目理解其核心工作流程并具备继续自学和扩展的能力。这个“极简版·即学即用”的定位非常精准。它面向的是这几类人后端或全栈开发者需要快速了解前端Vue3生态以便与前端协作或接手简单的前端任务。有Vue2或其他框架经验的前端想用最短时间切换到Vue3的语法和开发模式了解核心差异。真正的零基础新手对编程有基本概念比如知道变量、函数但从未接触过前端框架需要一个“最小可行产品”来建立信心和认知框架。产品经理或测试人员需要理解Vue3项目的基本结构和数据流向以便更好地沟通和测试。它的核心价值在于路径极简。它不会一上来就讲响应式原理、Composition API的哲学、Vite的构建细节。它会直接告诉你安装什么、创建什么文件、写哪几行代码、如何运行看到结果。整个过程就像搭积木你先把最关键的几块拼起来让项目“动起来”建立最直观的反馈。有了这个基础你再去看官方文档或深入教程就不会再觉得抽象和迷茫。所以在开始之前请调整好预期这不是一个全面的教程而是一个高效的“启动器”和“认知地图”。我们接下来要做的就是一步步把这个地图画出来。2. 环境准备别在第一步卡住先确保机器能跑无论教程多简单环境问题永远是第一个拦路虎。对于Vue3现在的标准工具链是Vite它比传统的 Vue CLI 更快、更轻量也是官方推荐的新项目创建方式。我们的“速成”就基于Vite。2.1 检查Node.js版本Vite 需要 Node.js 版本 14.18 或 16。我建议直接安装最新的LTS长期支持版本稳定性最好。 打开你的终端Windows用CMD或PowerShellMac/Linux用Terminal输入node -v如果显示版本号符合要求例如v18.19.0就可以跳过。如果没有安装或版本过低去 Node.js 官网下载安装包即可。注意安装Node.js时会自动包含npmNode包管理器。之后的所有命令都将在终端中执行。2.2 创建Vue3项目这是最关键的一步我们用Vite官方模板一键生成。在你想要放置项目的目录下例如D:\projects或~/Desktop打开终端。执行以下命令npm create vuelatest这个命令会下载并执行create-vue这是Vue官方的项目脚手架工具。接下来命令行会交互式地询问你一些配置选项。为了“极简速成”我们做最精简的选择Project name:项目名称输入vue3-quick-start或者你喜欢的任何名字不要用中文和空格。Add TypeScript?是否添加TypeScript按回车键选择 No。速成阶段先避开TS专注于Vue3本身。Add JSX Support?是否添加JSX按回车键选择 No。Add Vue Router for Single Page Application development?是否添加Vue路由按回车键选择 No。我们先不做多页面。Add Pinia for state management?是否添加Pinia状态管理按回车键选择 No。先不用状态管理。Add Vitest for Unit Testing?是否添加单元测试按回车键选择 No。Add an End-to-End Testing Solution?端到端测试按回车键选择 No。Add ESLint for code quality?是否添加代码检查按回车键选择 Yes。这个建议加上它可以帮助你保持代码格式规范但不会影响运行。选择完成后工具会自动创建项目文件夹并安装基础依赖。进入项目目录并安装剩余依赖cd vue3-quick-start npm install这个过程会下载Vue3、Vite以及相关依赖包。2.3 启动开发服务器依赖安装完成后运行npm run dev如果一切顺利终端会显示Local: http://localhost:5173端口可能不同。把这个地址复制到浏览器打开。 你应该会看到一个带有Vue logo和简单计数器的页面。恭喜你的第一个Vue3项目已经成功运行了实测感很多新手卡在这一步不是因为命令复杂而是因为网络问题导致npm install很慢或失败。如果遇到这种情况可以尝试设置淘宝镜像npm config set registry https://registry.npmmirror.com然后再执行npm install。3. 核心概念极简上手写一个能增删改查的待办清单现在项目跑起来了我们不要被初始页面复杂的文件结构吓到。我们直接动手在10分钟内创建一个经典的“待办事项清单”Todo List在这个过程中理解Vue3最核心的三个概念响应式数据、模板语法和事件处理。3.1 清理并修改入口文件首先我们让起点足够简单。打开src/App.vue文件把里面的内容全部删除替换为以下最简结构template div h1我的Vue3待办清单/h1 !-- 待办列表和输入框将放在这里 -- /div /template script setup // 这里写JavaScript逻辑 /script style scoped /* 这里写只作用于本组件的样式 */ /style保存文件浏览器页面会自动刷新显示一个大标题。这就是一个Vue单文件组件.vue文件的标准结构template模板、script逻辑、style样式。3.2 创建响应式数据与列表渲染Vue3的核心是响应式系统。数据变了视图自动更新。我们使用ref函数来创建一个响应式数据。 在script setup标签内写入script setup import { ref } from vue // 1. 创建响应式数据一个待办事项数组 const todos ref([ { id: 1, text: 学习Vue3核心语法, done: false }, { id: 2, text: 完成速成项目, done: true }, { id: 3, text: 阅读官方文档, done: false } ]) // 2. 创建一个响应式数据用于绑定输入框的新待办文本 const newTodoText ref() /script现在我们有了数据需要在模板中显示它。Vue使用v-for指令进行列表渲染。 在template的h1标签下方添加template div h1我的Vue3待办清单/h1 ul !-- 遍历 todos 数组为每个 todo 生成一个 li 元素 -- li v-fortodo in todos :keytodo.id input typecheckbox v-modeltodo.done span :style{ textDecoration: todo.done ? line-through : none } {{ todo.text }} /span /li /ul /div /template保存后页面会显示一个包含三个事项的列表第二个事项“完成速成项目”前面的复选框是勾选状态并且文字有删除线。v-for“todo in todos”循环指令。:key“todo.id”为每个循环项提供唯一标识Vue用于高效更新。:是v-bind:的简写。v-model“todo.done”双向数据绑定。勾选框的状态和todo.done这个布尔值会同步。{{ todo.text }}Mustache语法将数据插入到模板中。3.3 添加新增与删除功能只有展示不够我们来实现交互。 首先在列表上方添加一个输入框和按钮用于新增template div h1我的Vue3待办清单/h1 !-- 新增待办区域 -- div input typetext v-modelnewTodoText placeholder输入新待办... button clickaddTodo添加/button /div ul ... 之前的列表代码 ... /ul /div /template然后在script setup中添加addTodo方法和一个删除方法script setup import { ref } from vue const todos ref([...]) // 之前的数组 const newTodoText ref() // 添加待办 function addTodo() { if (newTodoText.value.trim() ) { return // 防止输入空内容 } todos.value.push({ id: Date.now(), // 用时间戳生成简单ID text: newTodoText.value, done: false }) newTodoText.value // 清空输入框 } // 删除待办 function deleteTodo(id) { todos.value todos.value.filter(todo todo.id ! id) } /script接着修改模板中的列表项为每个事项添加一个删除按钮li v-fortodo in todos :keytodo.id input typecheckbox v-modeltodo.done span :style{ textDecoration: todo.done ? line-through : none } {{ todo.text }} /span !-- 添加删除按钮 -- button clickdeleteTodo(todo.id)删除/button /liclick“addTodo”是v-on:的简写用于监听DOM事件。这里监听按钮的点击事件触发addTodo函数。newTodoText.value注意在script setup中访问ref创建的响应式变量的值需要加上.value。但在template中Vue会自动解包直接使用newTodoText即可。filter方法是JavaScript数组方法用于过滤出id不匹配的项从而实现删除。现在你的待办清单已经具备了展示、切换完成状态、新增、删除这四项核心功能。整个过程你只用了ref、v-model、v-for、click和几个简单的JavaScript函数。这就是Vue3“即学即用”的魅力用最少的API快速做出可交互的东西。4. 理解组合式API将逻辑抽离为可复用的函数上面我们把所有逻辑都写在了App.vue的script setup里。对于一个小功能没问题但功能复杂后代码会变得难以维护。Vue3的组合式APIComposition API就是为了解决这个问题它让我们可以像搭积木一样组合逻辑。我们来做一个简单的重构把待办清单相关的逻辑数据和方法抽离到一个独立的“组合式函数”中。 在src目录下新建一个文件composables/useTodoList.js如果没有composables文件夹就创建一个// src/composables/useTodoList.js import { ref } from vue export function useTodoList() { // 这些数据和方法现在被封装在一个函数里 const todos ref([ { id: 1, text: 学习Vue3核心语法, done: false }, { id: 2, text: 完成速成项目, done: true }, { id: 3, text: 阅读官方文档, done: false } ]) const newTodoText ref() function addTodo() { if (newTodoText.value.trim() ) return todos.value.push({ id: Date.now(), text: newTodoText.value, done: false }) newTodoText.value } function deleteTodo(id) { todos.value todos.value.filter(todo todo.id ! id) } // 返回所有需要在组件中使用的数据和方法 return { todos, newTodoText, addTodo, deleteTodo } }然后修改src/App.vue文件script setup // 从我们新建的文件中导入组合式函数 import { useTodoList } from ./composables/useTodoList // 调用函数获取返回的响应式数据和方法 const { todos, newTodoText, addTodo, deleteTodo } useTodoList() /script template !-- 模板部分完全不用变 -- div h1我的Vue3待办清单/h1 div input typetext v-modelnewTodoText placeholder输入新待办... button clickaddTodo添加/button /div ul li v-fortodo in todos :keytodo.id input typecheckbox v-modeltodo.done span :style{ textDecoration: todo.done ? line-through : none } {{ todo.text }} /span button clickdeleteTodo(todo.id)删除/button /li /ul /div /template保存功能完全一样但代码结构清晰多了。这样做的好处是什么可复用性如果另一个组件也需要待办清单功能直接导入useTodoList函数即可。可维护性所有与待办清单相关的逻辑都聚集在一个地方与界面渲染的代码分离。可测试性你可以单独测试useTodoList这个函数而不需要渲染组件。这就是组合式API的核心思想基于逻辑功能来组织代码而不是基于选项data, methods, computed。对于简单的组件你可能感觉不到优势但对于成百上千行代码的复杂组件这是救命稻草。5. 组件化将UI部分也拆分成独立零件我们刚刚把逻辑抽离了现在把UI也拆开。Vue是组件化框架一个页面应该由多个可复用的组件构成。 我们来把“单个待办事项”抽离成一个独立的组件。 在src/components目录下新建TodoItem.vue文件!-- src/components/TodoItem.vue -- template li input typecheckbox :checkedtodo.done changetoggleDone span :styletextStyle {{ todo.text }} /span button clickemit(delete)删除/button /li /template script setup import { computed } from vue // 定义组件接收的属性 const props defineProps({ todo: { type: Object, required: true } }) // 定义组件可以触发的事件 const emit defineEmits([update:done, delete]) // 根据完成状态计算样式 const textStyle computed(() ({ textDecoration: props.todo.done ? line-through : none })) // 切换完成状态的方法 function toggleDone() { emit(update:done, !props.todo.done) } /script style scoped li { margin-bottom: 8px; display: flex; align-items: center; } button { margin-left: 10px; } /style这个组件只负责显示一个待办项以及处理自身的状态切换和删除请求。它通过defineProps接收父组件传来的todo数据对象通过defineEmits声明它要触发的事件update:done和delete。现在修改App.vue使用这个子组件script setup import { useTodoList } from ./composables/useTodoList import TodoItem from ./components/TodoItem.vue // 导入子组件 const { todos, newTodoText, addTodo, deleteTodo } useTodoList() /script template div h1我的Vue3待办清单/h1 div input typetext v-modelnewTodoText placeholder输入新待办... button clickaddTodo添加/button /div ul !-- 使用 TodoItem 组件替代原来的 li -- TodoItem v-fortodo in todos :keytodo.id :todotodo update:done(newValue) todo.done newValue deletedeleteTodo(todo.id) / /ul /div /template:todo“todo”将当前循环的todo对象传递给子组件的todo属性。update:done“...”监听子组件触发的update:done事件当事件发生时执行箭头函数更新父组件中对应todo的done值。这是一种实现“双向绑定”的约定模式。delete“deleteTodo(todo.id)”监听子组件的delete事件触发父组件的deleteTodo方法。至此我们完成了一个典型的Vue3应用结构根组件App.vue组织页面结构管理核心状态子组件TodoItem.vue负责具体的UI渲染和交互组合式函数useTodoList封装了核心业务逻辑。数据通过props向下流事件通过emit向上冒泡。6. 下一步从“跑通”到“会用”的实战建议两小时内你跟着走完了从创建项目、编写响应式数据、处理事件、抽离逻辑到组件拆分的完整流程。你现在拥有的不是一个“Hello World”而是一个具备完整CRUD功能、结构清晰的小应用。这已经超越了“了解概念”进入了“能动手实现”的阶段。基于这个“极简版”骨架你可以立刻开始做以下几件事把知识巩固下来6.1 立即动手修改和扩展增加本地存储让待办列表在刷新页面后不丢失。可以在useTodoList函数里使用localStorage在todos变化时保存在初始化时读取。// 在 useTodoList.js 中 import { ref, watch } from vue export function useTodoList() { // 从 localStorage 初始化如果没有则用默认值 const todos ref(JSON.parse(localStorage.getItem(my-todos)) || [...]) // 监听 todos 变化自动保存 watch(todos, (newVal) { localStorage.setItem(my-todos, JSON.stringify(newVal)) }, { deep: true }) // deep: true 确保对象内部变化也能被监听到 // ... 其他逻辑不变 }添加筛选功能增加“全部”、“未完成”、“已完成”选项卡。这需要你新增一个响应式数据filter并用计算属性filteredTodos来根据筛选条件返回不同的列表。美化样式在App.vue和TodoItem.vue的style部分添加CSS或者引入像UnoCSS、Tailwind CSS这样的工具类框架。6.2 遇到问题如何排查当你修改代码后页面报错或没有效果按这个顺序检查浏览器控制台按 F12 打开开发者工具查看 Console控制台标签页。Vue和JavaScript的错误信息会在这里显示通常非常具体能直接定位到文件和行号。终端运行状态确保npm run dev命令没有停止运行。如果停止了重新运行它。文件路径和导入导出检查import语句的文件路径是否正确检查export和import的名字是否匹配。这是最常见的错误之一。响应式数据访问在script setup里操作ref变量时是否忘记了.value在template里是否又错误地加了.valueVue Devtools在浏览器扩展商店安装 “Vue Devtools”。安装后F12打开开发者工具会多出一个 “Vue” 标签页。你可以在这里清晰地看到组件树、组件状态、事件是调试Vue应用的利器。6.3 后续学习路径建议“速成”之后你应该按这个顺序深入官方文档直接看Vue3官方中文文档的核心概念部分。你现在有了实践经验再看ref、computed、watch、生命周期这些概念会理解得特别快。跳过“介绍”直接从“创建一个Vue应用”开始看。Vue Router学习如何做多页面单页应用内的页面切换。这是构建任何稍复杂应用的基础。Pinia当组件间需要共享状态比如用户登录信息时就用它替代自己写的简单状态管理。组件通信深入除了props/emit了解provide/inject以及使用状态管理库。生态工具了解Vite的基本配置、ESLintPrettier保持代码规范、Vitest做单元测试。记住框架的API是学不完的最重要的是掌握其核心思想和开发模式。你现在已经拿到了Vue3世界的“地图”和“启动钥匙”接下来就是选择你感兴趣的方向开始建造你自己的项目了。最好的学习方式就是基于这个待办清单把它改造成一个你真正想用的工具。 Vue3零基础2小时速成：从环境搭建到组件化实战
1. 先搞清楚“2小时速成”到底能学到什么以及它适合谁如果你看到“2小时Vue3零基础速成”这个标题第一反应可能是怀疑两小时真的能学会一个前端框架吗我的答案是能但前提是目标要明确。这里的“学会”不是让你成为Vue3专家也不是让你能独立开发复杂的企业级应用而是让你在最短时间内跑通一个能用的Vue3项目理解其核心工作流程并具备继续自学和扩展的能力。这个“极简版·即学即用”的定位非常精准。它面向的是这几类人后端或全栈开发者需要快速了解前端Vue3生态以便与前端协作或接手简单的前端任务。有Vue2或其他框架经验的前端想用最短时间切换到Vue3的语法和开发模式了解核心差异。真正的零基础新手对编程有基本概念比如知道变量、函数但从未接触过前端框架需要一个“最小可行产品”来建立信心和认知框架。产品经理或测试人员需要理解Vue3项目的基本结构和数据流向以便更好地沟通和测试。它的核心价值在于路径极简。它不会一上来就讲响应式原理、Composition API的哲学、Vite的构建细节。它会直接告诉你安装什么、创建什么文件、写哪几行代码、如何运行看到结果。整个过程就像搭积木你先把最关键的几块拼起来让项目“动起来”建立最直观的反馈。有了这个基础你再去看官方文档或深入教程就不会再觉得抽象和迷茫。所以在开始之前请调整好预期这不是一个全面的教程而是一个高效的“启动器”和“认知地图”。我们接下来要做的就是一步步把这个地图画出来。2. 环境准备别在第一步卡住先确保机器能跑无论教程多简单环境问题永远是第一个拦路虎。对于Vue3现在的标准工具链是Vite它比传统的 Vue CLI 更快、更轻量也是官方推荐的新项目创建方式。我们的“速成”就基于Vite。2.1 检查Node.js版本Vite 需要 Node.js 版本 14.18 或 16。我建议直接安装最新的LTS长期支持版本稳定性最好。 打开你的终端Windows用CMD或PowerShellMac/Linux用Terminal输入node -v如果显示版本号符合要求例如v18.19.0就可以跳过。如果没有安装或版本过低去 Node.js 官网下载安装包即可。注意安装Node.js时会自动包含npmNode包管理器。之后的所有命令都将在终端中执行。2.2 创建Vue3项目这是最关键的一步我们用Vite官方模板一键生成。在你想要放置项目的目录下例如D:\projects或~/Desktop打开终端。执行以下命令npm create vuelatest这个命令会下载并执行create-vue这是Vue官方的项目脚手架工具。接下来命令行会交互式地询问你一些配置选项。为了“极简速成”我们做最精简的选择Project name:项目名称输入vue3-quick-start或者你喜欢的任何名字不要用中文和空格。Add TypeScript?是否添加TypeScript按回车键选择 No。速成阶段先避开TS专注于Vue3本身。Add JSX Support?是否添加JSX按回车键选择 No。Add Vue Router for Single Page Application development?是否添加Vue路由按回车键选择 No。我们先不做多页面。Add Pinia for state management?是否添加Pinia状态管理按回车键选择 No。先不用状态管理。Add Vitest for Unit Testing?是否添加单元测试按回车键选择 No。Add an End-to-End Testing Solution?端到端测试按回车键选择 No。Add ESLint for code quality?是否添加代码检查按回车键选择 Yes。这个建议加上它可以帮助你保持代码格式规范但不会影响运行。选择完成后工具会自动创建项目文件夹并安装基础依赖。进入项目目录并安装剩余依赖cd vue3-quick-start npm install这个过程会下载Vue3、Vite以及相关依赖包。2.3 启动开发服务器依赖安装完成后运行npm run dev如果一切顺利终端会显示Local: http://localhost:5173端口可能不同。把这个地址复制到浏览器打开。 你应该会看到一个带有Vue logo和简单计数器的页面。恭喜你的第一个Vue3项目已经成功运行了实测感很多新手卡在这一步不是因为命令复杂而是因为网络问题导致npm install很慢或失败。如果遇到这种情况可以尝试设置淘宝镜像npm config set registry https://registry.npmmirror.com然后再执行npm install。3. 核心概念极简上手写一个能增删改查的待办清单现在项目跑起来了我们不要被初始页面复杂的文件结构吓到。我们直接动手在10分钟内创建一个经典的“待办事项清单”Todo List在这个过程中理解Vue3最核心的三个概念响应式数据、模板语法和事件处理。3.1 清理并修改入口文件首先我们让起点足够简单。打开src/App.vue文件把里面的内容全部删除替换为以下最简结构template div h1我的Vue3待办清单/h1 !-- 待办列表和输入框将放在这里 -- /div /template script setup // 这里写JavaScript逻辑 /script style scoped /* 这里写只作用于本组件的样式 */ /style保存文件浏览器页面会自动刷新显示一个大标题。这就是一个Vue单文件组件.vue文件的标准结构template模板、script逻辑、style样式。3.2 创建响应式数据与列表渲染Vue3的核心是响应式系统。数据变了视图自动更新。我们使用ref函数来创建一个响应式数据。 在script setup标签内写入script setup import { ref } from vue // 1. 创建响应式数据一个待办事项数组 const todos ref([ { id: 1, text: 学习Vue3核心语法, done: false }, { id: 2, text: 完成速成项目, done: true }, { id: 3, text: 阅读官方文档, done: false } ]) // 2. 创建一个响应式数据用于绑定输入框的新待办文本 const newTodoText ref() /script现在我们有了数据需要在模板中显示它。Vue使用v-for指令进行列表渲染。 在template的h1标签下方添加template div h1我的Vue3待办清单/h1 ul !-- 遍历 todos 数组为每个 todo 生成一个 li 元素 -- li v-fortodo in todos :keytodo.id input typecheckbox v-modeltodo.done span :style{ textDecoration: todo.done ? line-through : none } {{ todo.text }} /span /li /ul /div /template保存后页面会显示一个包含三个事项的列表第二个事项“完成速成项目”前面的复选框是勾选状态并且文字有删除线。v-for“todo in todos”循环指令。:key“todo.id”为每个循环项提供唯一标识Vue用于高效更新。:是v-bind:的简写。v-model“todo.done”双向数据绑定。勾选框的状态和todo.done这个布尔值会同步。{{ todo.text }}Mustache语法将数据插入到模板中。3.3 添加新增与删除功能只有展示不够我们来实现交互。 首先在列表上方添加一个输入框和按钮用于新增template div h1我的Vue3待办清单/h1 !-- 新增待办区域 -- div input typetext v-modelnewTodoText placeholder输入新待办... button clickaddTodo添加/button /div ul ... 之前的列表代码 ... /ul /div /template然后在script setup中添加addTodo方法和一个删除方法script setup import { ref } from vue const todos ref([...]) // 之前的数组 const newTodoText ref() // 添加待办 function addTodo() { if (newTodoText.value.trim() ) { return // 防止输入空内容 } todos.value.push({ id: Date.now(), // 用时间戳生成简单ID text: newTodoText.value, done: false }) newTodoText.value // 清空输入框 } // 删除待办 function deleteTodo(id) { todos.value todos.value.filter(todo todo.id ! id) } /script接着修改模板中的列表项为每个事项添加一个删除按钮li v-fortodo in todos :keytodo.id input typecheckbox v-modeltodo.done span :style{ textDecoration: todo.done ? line-through : none } {{ todo.text }} /span !-- 添加删除按钮 -- button clickdeleteTodo(todo.id)删除/button /liclick“addTodo”是v-on:的简写用于监听DOM事件。这里监听按钮的点击事件触发addTodo函数。newTodoText.value注意在script setup中访问ref创建的响应式变量的值需要加上.value。但在template中Vue会自动解包直接使用newTodoText即可。filter方法是JavaScript数组方法用于过滤出id不匹配的项从而实现删除。现在你的待办清单已经具备了展示、切换完成状态、新增、删除这四项核心功能。整个过程你只用了ref、v-model、v-for、click和几个简单的JavaScript函数。这就是Vue3“即学即用”的魅力用最少的API快速做出可交互的东西。4. 理解组合式API将逻辑抽离为可复用的函数上面我们把所有逻辑都写在了App.vue的script setup里。对于一个小功能没问题但功能复杂后代码会变得难以维护。Vue3的组合式APIComposition API就是为了解决这个问题它让我们可以像搭积木一样组合逻辑。我们来做一个简单的重构把待办清单相关的逻辑数据和方法抽离到一个独立的“组合式函数”中。 在src目录下新建一个文件composables/useTodoList.js如果没有composables文件夹就创建一个// src/composables/useTodoList.js import { ref } from vue export function useTodoList() { // 这些数据和方法现在被封装在一个函数里 const todos ref([ { id: 1, text: 学习Vue3核心语法, done: false }, { id: 2, text: 完成速成项目, done: true }, { id: 3, text: 阅读官方文档, done: false } ]) const newTodoText ref() function addTodo() { if (newTodoText.value.trim() ) return todos.value.push({ id: Date.now(), text: newTodoText.value, done: false }) newTodoText.value } function deleteTodo(id) { todos.value todos.value.filter(todo todo.id ! id) } // 返回所有需要在组件中使用的数据和方法 return { todos, newTodoText, addTodo, deleteTodo } }然后修改src/App.vue文件script setup // 从我们新建的文件中导入组合式函数 import { useTodoList } from ./composables/useTodoList // 调用函数获取返回的响应式数据和方法 const { todos, newTodoText, addTodo, deleteTodo } useTodoList() /script template !-- 模板部分完全不用变 -- div h1我的Vue3待办清单/h1 div input typetext v-modelnewTodoText placeholder输入新待办... button clickaddTodo添加/button /div ul li v-fortodo in todos :keytodo.id input typecheckbox v-modeltodo.done span :style{ textDecoration: todo.done ? line-through : none } {{ todo.text }} /span button clickdeleteTodo(todo.id)删除/button /li /ul /div /template保存功能完全一样但代码结构清晰多了。这样做的好处是什么可复用性如果另一个组件也需要待办清单功能直接导入useTodoList函数即可。可维护性所有与待办清单相关的逻辑都聚集在一个地方与界面渲染的代码分离。可测试性你可以单独测试useTodoList这个函数而不需要渲染组件。这就是组合式API的核心思想基于逻辑功能来组织代码而不是基于选项data, methods, computed。对于简单的组件你可能感觉不到优势但对于成百上千行代码的复杂组件这是救命稻草。5. 组件化将UI部分也拆分成独立零件我们刚刚把逻辑抽离了现在把UI也拆开。Vue是组件化框架一个页面应该由多个可复用的组件构成。 我们来把“单个待办事项”抽离成一个独立的组件。 在src/components目录下新建TodoItem.vue文件!-- src/components/TodoItem.vue -- template li input typecheckbox :checkedtodo.done changetoggleDone span :styletextStyle {{ todo.text }} /span button clickemit(delete)删除/button /li /template script setup import { computed } from vue // 定义组件接收的属性 const props defineProps({ todo: { type: Object, required: true } }) // 定义组件可以触发的事件 const emit defineEmits([update:done, delete]) // 根据完成状态计算样式 const textStyle computed(() ({ textDecoration: props.todo.done ? line-through : none })) // 切换完成状态的方法 function toggleDone() { emit(update:done, !props.todo.done) } /script style scoped li { margin-bottom: 8px; display: flex; align-items: center; } button { margin-left: 10px; } /style这个组件只负责显示一个待办项以及处理自身的状态切换和删除请求。它通过defineProps接收父组件传来的todo数据对象通过defineEmits声明它要触发的事件update:done和delete。现在修改App.vue使用这个子组件script setup import { useTodoList } from ./composables/useTodoList import TodoItem from ./components/TodoItem.vue // 导入子组件 const { todos, newTodoText, addTodo, deleteTodo } useTodoList() /script template div h1我的Vue3待办清单/h1 div input typetext v-modelnewTodoText placeholder输入新待办... button clickaddTodo添加/button /div ul !-- 使用 TodoItem 组件替代原来的 li -- TodoItem v-fortodo in todos :keytodo.id :todotodo update:done(newValue) todo.done newValue deletedeleteTodo(todo.id) / /ul /div /template:todo“todo”将当前循环的todo对象传递给子组件的todo属性。update:done“...”监听子组件触发的update:done事件当事件发生时执行箭头函数更新父组件中对应todo的done值。这是一种实现“双向绑定”的约定模式。delete“deleteTodo(todo.id)”监听子组件的delete事件触发父组件的deleteTodo方法。至此我们完成了一个典型的Vue3应用结构根组件App.vue组织页面结构管理核心状态子组件TodoItem.vue负责具体的UI渲染和交互组合式函数useTodoList封装了核心业务逻辑。数据通过props向下流事件通过emit向上冒泡。6. 下一步从“跑通”到“会用”的实战建议两小时内你跟着走完了从创建项目、编写响应式数据、处理事件、抽离逻辑到组件拆分的完整流程。你现在拥有的不是一个“Hello World”而是一个具备完整CRUD功能、结构清晰的小应用。这已经超越了“了解概念”进入了“能动手实现”的阶段。基于这个“极简版”骨架你可以立刻开始做以下几件事把知识巩固下来6.1 立即动手修改和扩展增加本地存储让待办列表在刷新页面后不丢失。可以在useTodoList函数里使用localStorage在todos变化时保存在初始化时读取。// 在 useTodoList.js 中 import { ref, watch } from vue export function useTodoList() { // 从 localStorage 初始化如果没有则用默认值 const todos ref(JSON.parse(localStorage.getItem(my-todos)) || [...]) // 监听 todos 变化自动保存 watch(todos, (newVal) { localStorage.setItem(my-todos, JSON.stringify(newVal)) }, { deep: true }) // deep: true 确保对象内部变化也能被监听到 // ... 其他逻辑不变 }添加筛选功能增加“全部”、“未完成”、“已完成”选项卡。这需要你新增一个响应式数据filter并用计算属性filteredTodos来根据筛选条件返回不同的列表。美化样式在App.vue和TodoItem.vue的style部分添加CSS或者引入像UnoCSS、Tailwind CSS这样的工具类框架。6.2 遇到问题如何排查当你修改代码后页面报错或没有效果按这个顺序检查浏览器控制台按 F12 打开开发者工具查看 Console控制台标签页。Vue和JavaScript的错误信息会在这里显示通常非常具体能直接定位到文件和行号。终端运行状态确保npm run dev命令没有停止运行。如果停止了重新运行它。文件路径和导入导出检查import语句的文件路径是否正确检查export和import的名字是否匹配。这是最常见的错误之一。响应式数据访问在script setup里操作ref变量时是否忘记了.value在template里是否又错误地加了.valueVue Devtools在浏览器扩展商店安装 “Vue Devtools”。安装后F12打开开发者工具会多出一个 “Vue” 标签页。你可以在这里清晰地看到组件树、组件状态、事件是调试Vue应用的利器。6.3 后续学习路径建议“速成”之后你应该按这个顺序深入官方文档直接看Vue3官方中文文档的核心概念部分。你现在有了实践经验再看ref、computed、watch、生命周期这些概念会理解得特别快。跳过“介绍”直接从“创建一个Vue应用”开始看。Vue Router学习如何做多页面单页应用内的页面切换。这是构建任何稍复杂应用的基础。Pinia当组件间需要共享状态比如用户登录信息时就用它替代自己写的简单状态管理。组件通信深入除了props/emit了解provide/inject以及使用状态管理库。生态工具了解Vite的基本配置、ESLintPrettier保持代码规范、Vitest做单元测试。记住框架的API是学不完的最重要的是掌握其核心思想和开发模式。你现在已经拿到了Vue3世界的“地图”和“启动钥匙”接下来就是选择你感兴趣的方向开始建造你自己的项目了。最好的学习方式就是基于这个待办清单把它改造成一个你真正想用的工具。