第1章 Web前端发展与Vue3简介

第1章

Web前端发发展与Vue3简介1.1Web前端发展历史1990年Web系统诞生1995年JavaScript诞生1993-1994浏览器革命与标准化蒂姆·伯纳斯-李在NeXT计算机上部署首个完整Web系统,确立浏览器/服务器(B/S)架构基础模型,标志着前端工程的起点Mosaic图形浏览器推动万维网成为主流互联网协议,NetscapeNavigator借多线程加载占领75%市场份额,W3C联盟成立,开启Web技术标准化进程网景与Sun联合发布JavaScript,集成至Navigator2.0,作为"胶水语言"打通页面组件间通信壁垒,支持非专业开发者通过脚本实现基础交互1.1.1Web前端诞生与发展1.1.2

动态网页技术一SSR与服务端渲染三大技术阵营SSR技术原理服务器执行模板中的动态指令,将变量替换为实际数据后输出完整HTML至浏览器开源社区主导,跨平台部署与开发敏捷性见长PHP网页内容更新依赖整页重载Java企业生态,侧重安全性与扩展性JSP形成"后端构建页面,前端负责展示"的协作范式网页模板+动态数据→服务器微软体系深度集成ASP浏览器SSR首次实现数据库驱动内容的实时更新,推动电商与社交网络爆发前后端耦合的三大核心问题沟通成本高昂开发效率低下调试复杂度剧增前端制作静态HTML模板后需移交后端嵌入PHP/JSP等动态脚本界面微调需前后端同步修改代码页面问题需跨职能协同定位根源前端无法独立完成页面调整前端无法单独排查渲染逻辑异常模板移交需反复确认数据绑定接口跨团队联调耗时,协作效率受限任何UI变更都依赖后端配合发布问题复现与定位链路长1.1.2

动态网页技术1.1.3

前端框架演进与技术范式迭代Ajax(2005年)jQuery(2006年)基于XMLHttpRequest实现异步数据请求,浏览器无刷新更新核心影响一:催生富客户端应用(RIA),Gmail和GoogleMaps证明前端可独立处理复杂交互核心影响二:推动前后端职责分离,后端专注提供API接口,前端负责交互逻辑与数据渲染贡献:链式调用语法大幅简化DOM操作贡献:统一跨浏览器兼容方案,覆盖IE6至IE9兼容问题局限:缺乏数据驱动视图机制,大型项目易陷入"回调地狱"MVC框架的第一次范式革命(2010-2011)核心创新关键缺陷框架Backbone.js(2010年)模型-视图数据绑定需手动更新DOMAngularJS(2010年)双向数据绑定与依赖注入脏检查机制导致性能瓶颈Ember.js(2011年)采用"约定优于配置"范式学习曲线陡峭系统化引入桌面开发理念,但未彻底解决视图层性能与开发体验问题1.1.3

前端框架演进与技术范式迭代三足鼎立的现代框架(2013年至今)React(2013年)Vue(2014年)Angular(2016年重构)虚拟DOM(VirtualDOM)实现高效视图更新组件化与单向数据流实现架构优化函数式组件与Hooks实现逻辑复用渐进式响应式数据绑定基于TypeScript的强类型体系组合式API(CompositionAPI)依赖注入与RxJS实现响应式编程解决逻辑组合问题三大框架采用不同技术手段,大幅提升视图层性能,奠定现代前端格局1.1.3

前端框架演进与技术范式迭代1.2.1

Vue3框架简介渐进式框架理念分层结构Vue3是基于MVVM模式的渐进式JavaScript框架由内到外四层同心结构:视图渲染一最内层基础能力将框架进行分层设计,每一层可单独实现并替换根据项目复杂度灵活选择不同层次和功能组件机制一组件化开发支持简单系统:采用声明式渲染机制路由机制一前端路由管理复杂系统:接入组件系统、Vue-router路由、Vuex状态管理状态管理一多组件状态共享什么是Vue3八大改进性能提升:体积更小:多节点支持:CompositionAPl:替代Mixin,灵活复用代码且支持类型推断重新设计虚拟DOM,优化模板编译,改进组件初始化速度对引入进行"剪枝",未使用的引用不打包进项目组件模板不再需要唯一根节点,可含多个节点Suspense组件:TypeScript支持:灵活渲染:自定义渲染API:完全采用TS编写,无兼容性问题,类型检善可将子节点渲染到父组件以外的DOM节点等待异步组件解析时支持开发者方便地进行自定义渲染器开发显示后备内容1.2.1

Vue3框架简介1.2.2

Vue3的优势体积较小压缩后仅33KB,轻量高效,加载速度快基于虚拟DOM通过预先计算优化DOM操作,避免直接操作DOM对象,运行效率更高双向数据绑定3开发人员无需直接操作DOM,可将更多精力投入业务逻辑生态丰富初学者友好5易于入门,学习成本较低,提供大量学习资料存在许多成熟稳定的基于Vue3的UI框架和组件,可快速实现开发轻量、高效、易学-Vue3是构建用户界面的理想选择1.4配置Node.js环境1.3选择IDENode.js是开源跨平台的JavaScript运行时环境VSCode:微软推出的轻量级代码编辑器,免费开源含内置模块,可脱离Apache或IIS作为独立服务器执行下载:官网选择与操作系统匹配的安装包支持语法高亮、智能补全、代码片段、GIT等特性跨平台支持Windows、macOS及Linux推荐选择LTS长期支持版,经企业级验证适合生产环境安装步骤:官网下载安装包→安装简体中文语言包安装Vetur插件:验证安装:执行node-v查看node版本,npm-v查看npm版本实现Vue3语法高亮,支持自动完成与诊断错误VSCode+Vetur插件+Node.js