JavaScript基础课程二十一、前端框架入门（Vue3 组合式 API）

本课作为前端框架入门核心课聚焦Vue3组合式API从理念、语法到实战全方位讲解。Vue3凭借数据驱动、声明式渲染的特性彻底简化原生DOM操作让开发更聚焦业务逻辑。组合式API作为Vue3主推方案解决了复杂项目逻辑分散的问题代码更易维护、复用。课程通过单词管理实战案例串联ref/reactive响应式、模板语法、事件绑定、列表渲染等核心知识点结合Vite快速搭建项目打通工程化到框架开发的最后一环。掌握本课内容不仅能快速上手Vue3基础开发更是后续学习Vue组件化、路由、工程化项目的关键是前端从原生迈向框架开发的重要转折点。一、课程学习目的理解Vue框架的核心优势搞懂声明式渲染、数据驱动两大核心理念告别原生DOM操作。掌握Vue3组合式APIComposition API基础语法区分组合式与选项式API的差异。熟练使用ref、reactive定义响应式数据实现数据与视图的自动同步。学会事件绑定、插值表达式、方法定义、数据渲染等基础操作搭建简单Vue页面。结合Vite工程化搭建Vue3项目为后续深入学习Vue组件、路由、状态管理奠定基础。为什么要学习前端框架它与原生JavaScript的关系学习Vue的理由入门门槛极低基于原生HTML/CSS/JS零基础也能快速上手学习成本远低于React、Angular。国内就业市场广阔互联网企业使用率第一岗位数量多求职竞争力强。生态完整成熟路由、状态管理、组件库、跨端方案一应俱全开发效率极高。渐进式框架灵活度高可用于小型页面也能支撑大型企业项目适配全场景开发。中文资源丰富文档、教程、社区完善遇到问题极易解决。原生JS写前端适合极小场景原生JavaScript纯JS开发前端从技术底层来说所有前端框架、库最终都会被编译或解析成原生JS代码运行在浏览器中。简单的静态页面、小功能模块比如表单校验、按钮交互、轮播图用原生JS手写完全够用甚至更轻量不需要引入额外依赖加载速度更快。但一旦项目规模扩大、功能变复杂纯原生JS开发就会暴露出海量问题这也是前端框架应运而生的根本原因——框架是为了解决原生开发的效率、维护性、扩展性难题而非替代原生JS。原生JS开发复杂项目的致命痛点1. DOM操作繁琐低效极易出错原生JS实现视图更新需要手动获取DOM节点、判断节点状态、拼接HTML、绑定事件、移除旧节点步骤极其繁琐。比如更新列表数据需要先清空容器、循环遍历数据、创建DOM元素、追加到页面数据量大时还容易出现内存泄漏、节点重复、事件冲突等问题。而且多人协作时每个人操作DOM的习惯不同代码极易混乱。2. 无统一代码规范维护成本爆炸原生JS没有强制的代码结构、模块化规范小项目里代码可以随意堆砌一旦涉及多人协作、迭代功能很快就会变成“面条代码”“回调地狱”。变量污染、全局冲突、逻辑耦合严重后期改一个小功能可能牵一发而动全身排查bug耗时极长老项目接手难度极大。3. 重复造轮子开发效率极低前端开发有大量通用场景数据响应式更新、组件复用、路由跳转、状态管理、跨端适配、异步请求处理等。纯原生开发需要手动实现这些通用逻辑每个项目都要重新写一遍不仅耗时耗力还难以保证代码质量和兼容性而框架已经把这些通用能力封装好直接调用即可大幅缩短开发周期。4. 响应式逻辑手写难度大视图与数据脱节原生JS中数据和视图是分离的数据变化后必须手动更新DOM一旦业务逻辑复杂很容易出现数据和视图不一致的问题。比如表单输入、列表筛选、弹窗联动等场景手动同步数据和视图的代码量巨大且容错率极低。5. 大型项目难以管控性能优化无标准中大型项目涉及大量组件嵌套、状态共享、异步数据流原生JS没有成熟的解决方案容易出现性能瓶颈比如频繁DOM重绘、冗余请求。性能优化全靠开发者经验没有标准化方案项目越大越难把控稳定性和运行效率。前端框架的核心价值解决原生痛点规范开发流程框架本质是封装好的最佳实践集合帮开发者规避原生坑聚焦业务逻辑而非底层细节主流框架Vue/React/Angular的共性优势如下1. 声明式开发聚焦业务而非细节框架采用声明式语法只需描述“页面想要什么效果”无需关心“怎么实现DOM操作”。比如Vue的模板语法、React的JSX数据变化后框架自动同步视图彻底解放手动DOM操作代码更简洁易懂。2. 组件化复用拆分复杂项目框架强制推行组件化开发把页面拆分成独立、可复用的模块按钮、表单、列表、弹窗组件内逻辑封闭、互不干扰既方便复用又便于单独维护和测试大幅提升协作效率。3. 统一开发规范降低协作成本框架有固定的代码结构、生命周期、数据流规范不管是新手还是资深开发者都能遵循同一套标准写代码避免风格混乱。后续迭代、项目交接、bug排查都更高效。4. 内置完善生态无需重复造轮框架配套有成熟的工具链路由Vue-Router/React-Router、状态管理Pinia/Redux、UI组件库、构建工具Vite/Webpack、调试插件等开箱即用覆盖开发、测试、部署全流程。5. 内置性能优化降低开发门槛框架底层做了大量性能优化虚拟DOM、diff算法、按需加载、懒渲染、缓存机制等开发者无需精通底层原理就能写出高性能代码避免手动操作DOM导致的性能问题。6. 适配复杂场景支撑大型项目针对SPA单页应用、SSR服务端渲染、跨端开发、微前端等复杂场景框架都有成熟解决方案这是原生JS很难快速实现的。简单项目用原生复杂项目用框架才是前端开发的最优解。适合纯原生JS开发极简静态页面、单一小功能、局部脚本、学习JS底层原理、追求极致轻量无依赖的小页面。必须用前端框架中后台管理系统、电商平台、SPA应用、小程序/跨端项目、多人协作项目、需要长期迭代维护的项目。前端框架不是“必需品”而是效率工具。学习框架的前提是吃透原生JS底层框架只是简化开发、规范流程的手段脱离原生基础直接学框架很难理解底层逻辑遇到问题也无法排查。全球通用三大主流前端框架这三个是企业开发、面试、工作最常用的占据90%市场。1. Vue国内最火作者尤雨溪华人特点易学、轻量、渐进式、中文生态好版本Vue3主流、Vue2已停止维护适合国内企业项目快速开发新手入门首选代表公司阿里、腾讯、字节、美团、京东2. React全球第一作者MetaFacebook特点灵活、生态极强、TypeScript 友好核心JSX 语法、单向数据流适合大型复杂项目海外/外企跨端开发React Native代表公司Meta、Netflix、Airbnb、微软3. Angular企业重型作者Google特点重型框架、全功能、TypeScript 内置适合超大型企业后台系统严谨规范的团队代表公司Google、微软企业项目新兴热门现代化轻量框架追求极速、体积小、性能高近年崛起。1. Svelte无虚拟DOM编译时优化代码极简体积超小适合小型项目、组件库2. Solid.js写法像 React但比 React 快很多无虚拟DOM高性能适合高性能需求项目3. Qwik主打极致首屏加载速度0 水合技术未来潜力框架基于三大框架静态站点 / SSR 框架它们不是新框架而是Vue/React 的上层增强框架用于官网、博客、电商。Vue 生态NuxtVue 官方全栈框架SSR/SSGVitePressVue 官方文档站框架React 生态Next.jsReact 官方最强框架全球最火Gatsby静态站点生成一套代码多端运行跨端框架1. UniApp国内最强基于 Vue一套代码App 小程序 H5国内企业跨端首选2. Taro支持 Vue/React专注小程序跨端3. React Native基于 React开发原生 App4. FlutterGoogle 出品非 JS 系Dart 语言高性能跨端微前端 / 低代码 相关qiankun国内最火微前端框架icestark阿里微前端LowCode低代码平台如阿里飞冰、京东低代码Vue 发展史:Vue 从诞生到现在一、Vue 诞生2013–2014作者尤雨溪Evan You起源2013 年在 Google 工作时为了解决 Angular 复杂、React 学习成本高的问题开始开发轻量框架正式发布2014 年 2 月 Vue 0.11.0Alpha 版定位轻量、易学、渐进式前端框架二、Vue 1.x 时代20152015 年 10 月Vue 1.0.0 正式版特点模板语法成熟双向绑定组件系统轻量简单、上手极快地位前端圈开始爆红成为中小型项目首选三、Vue 2.x 黄金时代2016–2020最经典1. 2016 年 9 月Vue 2.0重大升级虚拟 DOM性能大幅提升服务端渲染 SSR更好的跨平台支持 Weex底层响应式Object.defineProperty2. 生态爆发Vue Router / Vuex成为标配Element UI / iView组件库流行国内企业使用率第一的前端框架3. 最终版2022 年 Vue 2.7最后一个大版本已停止维护四、Vue 3 新时代2020 至今当前主流1. 2020 年 9 月Vue 3.0 正式发布代号One Piece完全重写革命性升级响应式改用Proxy性能更强、无监听限制新增Composition API组合式 API原生支持 TypeScript多根节点 Fragment按需引入、体积更小2. 2021 年script setup语法糖让 Vue3 写法更简洁、更优雅成为标准写法3. 2022 年Vue 3.2稳定、生态成熟Pinia 取代 VuexVite 成为官方构建工具4. 最新版2025–2026Vue 3.4 / 3.5持续优化编译、运行时性能五、Vue 发展时间线浓缩版2014Vue 诞生2015Vue 1.0 正式版2016Vue 2.0 发布黄金时代开始2020Vue 3.0 发布全新架构2022Vue 2 停止维护Vue 3 成为官方默认版本至今Vue 3 是企业主流、新项目唯一选择六、Vue 为什么能成功易学易用HTML/CSS/JS 基础就能上手渐进式可大可小适合所有项目中文文档友好国内生态极强性能优秀不断优化迭代生态完整路由、状态、组件库、工具链一应俱全二、核心知识点讲解1. Vue3 框架基础认知Vue是一款轻量、高效的渐进式前端框架主打数据驱动视图无需手动操作DOM修改数据即可自动更新页面大幅提升开发效率。Vue3是最新稳定版主推组合式API相比Vue2选项式API代码聚合度更高、复用性更强适合复杂项目开发。2. 组合式API 核心语法组合式API以setup为入口所有逻辑写在setup内部按需引入API实现逻辑关注点分离。核心响应式APIref定义基础类型响应式数据字符串、数字、布尔值访问/修改需加.valuereactive定义引用类型响应式数据对象、数组直接操作无需.valuesetup组合式API入口函数返回数据和方法供模板使用defineProps/defineEmits组件通信基础入门阶段了解即可3. Vue3 模板语法基础插值表达式{{ 数据名 }}将响应式数据渲染到页面事件绑定click方法名绑定点击、输入等交互事件条件渲染v-if控制元素显示隐藏列表渲染v-foritem in list循环渲染数组数据4. Vue3 Vite 项目搭建流程依托前课npmVite知识直接创建Vue3模板项目内置组合式API环境无需手动配置开箱即用。三、示例程序示例1Vue3组合式API基础案例单词管理器!-- Vue3单文件组件.vue -- template !-- 模板区域视图渲染 -- div classword-box h1{{ title }}/h1 !-- 插值表达式渲染数据 -- input v-modelinputWord placeholder请输入单词 / button clickaddWord添加单词/button !-- 列表渲染 -- ul li v-for(item, index) in wordList :keyindex {{ item.en }} - {{ item.cn }} button clickdelWord(index)删除/button /li /ul /div /template script setup // 组合式API入口直接在setup语法糖下编写逻辑 import { ref, reactive } from vue // 1. ref定义基础类型响应式数据 const title ref(Vue3单词管理器) const inputWord ref() // 2. reactive定义引用类型响应式数据 const wordList reactive([ { en: apple, cn: 苹果 }, { en: banana, cn: 香蕉 } ]) // 3. 定义方法添加单词 const addWord () { if (!inputWord.value) return wordList.push({ en: inputWord.value, cn: 待翻译 }) // 清空输入框 inputWord.value } // 4. 定义方法删除单词 const delWord (index) { wordList.splice(index, 1) } /script style scoped /* 组件私有样式 */ .word-box { max-width: 600px; margin: 20px auto; padding: 20px; } input { padding: 8px; margin-right: 10px; } button { padding: 8px 12px; cursor: pointer; } li { margin: 8px 0; } /style示例2Vite创建Vue3项目命令# 1. 创建Vite项目npmcreate vitelatest# 2. 配置项# 项目名vue3-word-project# 框架选择Vue# 语言选择JavaScript# 3. 进入项目、安装依赖、启动cdvue3-word-projectnpminstallnpmrun dev四、掌握技巧与方法基础类型数据用ref对象/数组用reactive按需选择响应式API。script setup是Vue3语法糖简化组合式API写法无需return数据和方法。v-model实现双向绑定输入框数据与变量自动同步无需手动获取DOM值。v-for必须绑定:key提升Vue渲染效率key值需唯一。响应式数据修改后Vue自动更新视图彻底告别document.querySelector等DOM操作。调试时在控制台查看组件实例观察响应式数据变化排查渲染问题。五、课后作业基础作业用Vite创建Vue3项目启动并运行默认页面熟悉项目结构。使用ref定义标题、描述变量通过插值表达式渲染到页面。绑定点击事件点击按钮修改变量值观察视图自动更新。进阶作业使用reactive定义单词数组通过v-for循环渲染列表。实现添加、删除单词的功能搭配v-model双向绑定输入框。添加v-if判断无数据时显示“暂无单词”提示。实战作业搭建Vue3单词管理页面整合响应式数据、事件绑定、列表渲染、条件渲染实现增删功能编写规范注释纳入Git版本管理。上一课代码规范与 Git 版本控制 实战作业代码完整实战代码规范版Git配套文件一、项目结构规范工程化结构code-git-demo/ ├── .gitignore # Git忽略文件配置 ├── package.json # npm依赖脚本 ├── index.html # 页面入口 └── src/ ├── main.js # 规范主逻辑 └── utils.js # 规范工具模块二、.gitignoreGit忽略配置# 依赖目录 node_modules/ # 打包目录 dist/ # 日志文件 *.log # 编辑器配置 .idea/ .vscode/三、package.json规范配置{ name: code-git-demo, version: 1.0.0, type: module, scripts: { dev: vite, lint: eslint src/**/*.js, build: vite build }, devDependencies: { vite: ^5.0.0, eslint: ^8.50.0 } }四、src/utils.js规范工具模块/** * 渲染单词列表到页面 * param {string} selector - 挂载节点选择器 * param {Array} wordList - 单词数组 */ export function renderWordList(selector, wordList) { const dom document.querySelector(selector) if (!dom) return let html h2单词列表/h2ul wordList.forEach(item { html li${item.en} - ${item.cn}/li }) html /ul dom.innerHTML html }五、src/main.js规范主逻辑import { renderWordList } from ./utils.js // 常量全大写下划线 const WORD_LIST [ { en: apple, cn: 苹果 }, { en: orange, cn: 橙子 }, { en: grape, cn: 葡萄 } ] /** * 页面初始化函数 */ async function initPage() { try { // 渲染单词列表 renderWordList(#app, WORD_LIST) console.log(页面初始化成功) } catch (error) { console.error(页面初始化失败, error) } } // 执行初始化 initPage()六、index.html页面入口!DOCTYPE html html langzh-CN head meta charsetUTF-8 title代码规范Git实战/title /head body div idapp/div script typemodule src/src/main.js/script /body /html七、Git完整操作命令# 1. 初始化Git仓库 git init # 2. 配置用户信息仅首次使用 git config user.name 你的名字 git config user.email 你的邮箱 # 3. 添加所有文件到暂存区 git add . # 4. 规范提交 git commit -m feat: 初始化项目编写规范单词展示代码 git commit -m chore: 配置.gitignore和ESLint规范代码格式 # 5. 查看提交历史 git log # 6. 查看代码状态 git status代码功能说明本实战代码整合代码规范、ESLint校验、Git版本控制三大核心知识点基于Vite原生JS搭建单词展示项目全程遵循JS规范采用语义化命名、标准缩进、规范注释集成ESLint自动校验代码风格同时包含完整Git操作流程实现项目初始化、代码规范改造、暂存、提交、日志查看全流程。代码可直接运行搭配规范校验脚本能直观检测不规范代码演示企业级开发中“规范编写版本管理”的标准流程帮助养成合规编码习惯适配团队协作开发。注意事项执行Git命令前需先安装Git并配置用户名、邮箱避免提交权限报错。代码命名严格遵循小驼峰变量/函数、全大写常量、语义化原则禁用无意义命名。ESLint校验报错时需按提示修正代码禁止跳过规范校验直接提交。Git提交信息需清晰明了格式为“类型: 描述”如“feat: 新增单词列表”“fix: 修复命名规范”。禁止提交node_modules、dist等冗余文件需配置.gitignore文件过滤。每次提交前执行git status确认修改文件无误后再暂存、提交。规范注释需覆盖函数、复杂逻辑生产环境清除无用console打印。作业验收标准代码完全符合规范命名、缩进、注释、语法无违规ESLint校验无报错。Git流程完整初始化、暂存、提交、日志查看均执行成功提交信息规范。.gitignore配置生效未提交冗余文件项目结构清晰。项目可正常启动运行代码可读性强符合企业开发规范。