Vue 3基础入门 课件全套 王宁 第1-12章 Web前端发展与Vue3简介-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.jsLTS-前端开发环境就绪1.5安装Vue31.5.1独立版本安装1.5.2CDN方式安装通过CDN分布式内容分发网络引入Vue3下载编译好的Vue3JavaScript脚本到本地1.5.3npm方式安装1.5.4使用前端脚手架安装第2章

HelloWorld与Vue3基础特性2.1Vue3实例创建createApp(RootComponent)mount('#app')mount(:应用实例方法,挂载应用到DOMVue:Vue3库的全局对象createApp(:新增全局方法,创建应用实例'#app':CSS选择器,指定挂载目标元素RootComponent:根组件对象(含data、methods、template)constvm=:保存应用实例引用作用:创建Vue3应用实例并指定根组件作用:将Vue3应用挂载到指定DOM元素每个Vue3应用都从createApp(开始,一个页面可创建多个独立应用实例组件实例(vm)应用实例挂载机制每个Vue3应用从createApp0开始挂载前:组件未初始化,模板未渲染vm.sdata:响应式数据对象一个页面可创建多个独立应用实例挂载后:生成响应式系统,渲染DOMvm.Sprops:接收的props一个应用实例只能挂载一个DOM挂载点元素内容被Vue生成的DOM替换vm.Sel:根DOM元素挂载后生成响应式系统,渲染DOM实现数据的双向绑定提供对组件所有属性和方法的访问应用实例管理全局配置,组件实例提供属性方法访问2.1Vue3实例创建响应式系统原理Vue2vsVue3对比创建方法:newVue(})→Vue.createApp(0)data选项必须为函数,返回普通JavaScript对象调用方式:Smount("#app')→.mount("#app")Vue3使用Proxy代理(Vue2用Object.defineProperty)结果:直接获得组件实例→获得应用实例依赖追踪:模板访问数据时,代理记录属性→依赖方映射3避免全局配置污染,链式调用更简洁,支持多个根实例Vue变更通知:数据修改时,代理精确触发依赖更新实现数据变动时视图的自动同步更新Proxy代理拦截get/set操作,实现精准的依赖追踪与变更通知2.1Vue3实例创建Vue3

程序执行流程步骤1步骤4步骤2步骤3步骤5步骤6步骤7建立响应式系统创建根组件对象渲染初始视图调用Vue.createApp查找DOM元素#app编译模板加载Vue库将模板编译为高效的虚拟DOM渲染函数创建和插入DOM节点,生成响应式系统代理拦截数通过CDN引入或模块导入Vue3库定义app对象,包含data、metthods等选项,data必须为函数,返回普通对象传入根组件对象,创建应用实例通过CSS选择器定位挂载目标元素据访问与修改,实现双向绑定编译时优化模板+运行时精准更新=原生级渲染性能2.1Vue3实例创建2.2

Vue3生命周期销毁阶段更新阶段挂载阶段创建阶段beforeUnmount实例销毁前,仍可访问数据和DOMbeforeCreate→实例初始化,响应式系统和事件机制建立前created→响应式数据初始化完成可访问data和methodsbeforeMount模板编译完成,DOM挂载前mounted→DOM挂载完成,可操作DOM节点beforeUpdate-数据变更后,虚拟DOM重新渲染前updated→DOM重渲染完成unmounted-)实例销毁完成,所有绑定解除钩子函数均为同步事件,this自动绑定当前组件实例,禁止使用箭头函数定义2.2.1认识生命周期2.2.2

生命周期钩子函数beforeCreateeCreatecreated时机:实例初始化后,响应式系统和事件机制建立前时机:响应式数据初始化完成后,DOM挂载前能力边界:无法访问data/computed和methods,this.Sel为undefined能力边界:可访问data/computed和methods,this.$el仍为undefined适用场景:执行数据相关的初始化逻辑适用场景:执行与组件状态无关的初始化逻辑典型应用:发起APi请求获取数据、初始化第三方库、设置定时器典型应用:在根实例设置全局加载状态注意事项:避免操作实例数据或DOM注意事项:避免操作DOM节点beforeCreate无数据访问权,created有数据访问权但无DOM访问权beforeMountmounted时机:模板编译完成后,DOM挂载前能力边界:可访问data/computed和methods,this.时机:DOM挂载完成后能力边界:可访问data/computed、methods和渲染完成的DOM节点,this.$el指向根元素执行DOM相关操作初始化图表库、绑定原生事件监听、获取元素尺寸避免同步修改响应式数据导致循环更新$el仍为undefined适用场景:典型应用:适用场景:执行最后的数据预处理逻辑典型应用:修改即将渲染的数据、初始化不依赖DOM的第三方库注意事项:注意事项:避免操作真实DOM节点beforeMount可预处理数据,mounted可操作DOM2.2.2

生命周期钩子函数beforeUpdateupdated时机:数据变更导致的DOM重渲染完成后;能力:可访问更新后的数据和最新DOM结构;时机:响应式数据变更后,虚拟DOM重新渲染前;能力:可访问更新后数据,DOM反映旧视图状态;应用:记录滚动位置、保存当前表单状态;注意:禁止修改响应式数据,避免无限循环应用:根据新DOM调整第三方库、触发动画效果;注意:谨慎操作数据,易导致递归更新beforeUnmountunmounted时机:实例销毁完成后;能力:所有绑定已解除,this.$el为null;应用:记录销毁日志、释放非响应式资源;注意:无法再访问实例数据或方法时机:实例销毁前;能力:仍可访问响应式数据和DOM节点;应用:移除事件监听、清除定时器、取消网络请求;注意:避免修改数据或触发新渲染2.2.2

生命周期钩子函数2.3数据绑定…Mustache双大括号语法最简单常用的数据绑定方法,{msg]标签被替代为响应式对象值数据改变时插值处内容自动更新示例:Message:{msg}j执行一次性插值,数据改变后内容不更新V-once指令适用于静态内容场景示例:不会改变:{msg]j响应式验证在控制台修改vm.msg的值,页面文字立刻更新体现了Vue3响应式系统的数据驱动视图特性Mustache实现响应式绑定,V-once实现一次性渲染2.3.1文本插值JavaScript表达式支持v-html指令与v-bind指令v-html:输出真正的HTML内容,span内容被替换为原始HTML支持的表达式:{{number+1}}算术运算{ok?"YES":"NO"}三元表达式{{message.split(").reverse().join(")}方法链调用注意:v-html忽略Vue数据绑定,不能用于组合局部模板v-bind:绑定HTML属性,语法v-bind:id=""list-"+id"字符串拼接v-bind:id="dynamicld"不支持:语句(如vara=1)、流控制(如布尔attribute:值为null/undefined/false时属性不渲染if语句)每个绑定只能包含单个表达式示例:v-bind:disabled="isButtonDisabled"表达式在所属实例作用域下作为JavaScript语句被解析2.4案例登录页面实现通过createApp创建Vue实例,data返回页面文本数据使用Mustache语法绑定标题、标签等文本内容页面结构包含登录标题区、用户名输入框、密码输入框功能项包含记住我复选框、忘记密码链接、登录按钮data选项必须为函数,返回普通JavaScript对象登录计算属性过滤字符需求:输入框实时显示输入内容,小写字母转大写实现步骤:定义data属性保存输入→V-model绑定输入框→计算属性转换大小写→Mustache渲染Vue3移除了过滤器功能,使用计算属性computed替代计算属性基于响应式依赖缓存,只有依赖变化时才重新计算计算属性computed实现数据的派生与格式化处理Vue3

基本指令3.1

条件渲染指令:v-if与v-elsev-if指令组使用要点V-if:根据表达式真假决定是否渲染元素v-else-if:添加额外条件分支,须紧接v-ifv-else-if:添加额外条件分支,须紧接v-ifv-else:最终默认分支,不需要表达式条件变化时完全销毁或重建DOM指令必须连续使用在相邻元素上支持template标签包裹多个元素适合条件不频繁变化的场景条件为false时不生成任何DOM节点3.1.3

v-show与v-if的区别V-showv-if通过CSS的display属性控制显示隐藏根据条件真假决定是否创建DOM元素无论条件真假都会创建DOM元素条件变化时涉及销毁和重建VS仅切换CSS样式,性能更高初始渲染成本较高初始渲染更高效频繁切换用v-show,条件不变用v-if3.2列表渲染指令v-for:基本用法基本语法v-for='iteminitems'items为数据源数组,item为当前元素别名支持可选索引参数:(item,index)initems对象遍历支持(value,key,index)三参数形式可遍历对象的所有可枚举属性key属性始终为v-for设置唯一的key属性使Vue高效跟踪节点身份避免使用index作为keyv-for还可遍历整数范围,如nin103.2.2

数组更新变更方法(修改原数组)非变更方法(返回新数组)filter():过滤元素concat():合并数组slice():截取子数组用新数组替换旧数组即可触发更新push()/pop():末尾添加或删除shift()/unshift():开头删除或添加splice():插入、删除或替换sort()/reverse():排序或反转3.3

数据绑定指令v-bind参数与属性绑定缩写语法动态绑定HTML特性,如:href="url"支持组件props的绑定传递使用冒号()替代完整v-bind写法如:href="url"等同于v-bind:href="url"动态绑定合并行为v-bind:[attribute]动态指定属性名可直接绑定包含多个属性的对象v-bind="object"与独立属性同时存在后定义的属性值覆盖先定义的同名属性3.4

v-model与表单基本用法值绑定规则实现表单元素的双向数据绑定文本框绑定字符串单个复选框绑定布尔值多个复选框绑定布尔值多个复选框绑定数组单选按钮绑定value值支持.number和.lazy修饰符文本输入:value属性+input事件复选框:checked属性+change事件实质是语法糖,封装值更新和事件监听V-model自动适配不同输入控件类型3.5

方法、计算属性与监听属性计算属性computed监听属性watch基于响应式依赖进行缓存数据变化时执行异步或开销大的操作依赖不变时返回缓存结果无缓存,每次变化都执行VS适合多个值变化影响一个值适合一个值变化影响多个值支持deep深度监听可读性和逻辑性更好3.6

事件处理监听事件绑定DOM事件和自定义事件支持内联表达式或方法引用可监听所有原生DOM事件v-on(简写@)事件处理函数将逻辑封装到methods选项中保持模板简洁清晰便于逻辑复用和单元测试多事件监听使用对象语法同时监听多个事件如v-on="{focses:Foncsed,blur:Unlown}"Vue3取消.native修饰符,改用emits选项声明组件事件事件修饰符与按键修饰符事件修饰符按键与系统修饰键按键修饰符:stop:阻止单击事件传播.prevent:阻止默认行为.capture:事件捕获模式.self:仅自身触发once:只触发一次.passive:不阻止默认行为.enter.tab.esc.space系统修饰键:.ctrl.alt.shift.meta.exact:精确控制修饰键组合修饰符顺序影响行为不要同时使用.passive和,prevent3.6

事件处理3.7

其他基本指令V-cloak

防闪烁指令V-once首次渲染指令元素或组件只渲染一次不需要赋值后续重新渲染视为静态内容可用于优化更新性能避免页面加载时的闪烁现象保留在元素上直到编译完成配合CSS规则使用模块化开发中通常无需v-cloak3.8

自定义指令钩子函数注册方式bind:首次绑定时调用inserted:插入父节点时调用update:VNode更新时调用unbind:解绑时调用全局注册:Vue.directive('name',0)局部注册:组件directives选项动态指令参数函数简写参数可根据组件实例数据更新如v-mydirective:[argumentj="value"bind和update触发相同行为时可简写可传入对象字面量自定义指令用于封装DOM操作,提高代码重用性3.9

案例实践案例一:随机背景色案例二:注册登录页面使用自定义指令v-img,先随机背景色填充元素区域,图片加载完成后替换为背景图,解决网络慢时图片加载体验问题使用v-model绑定表单数据,v-on绑定提交按钮click事件,prevent修饰符阻止默认提交,直接发送user对象到服务器综合运用v-model、V-on、v-bind和自定义指令综合运用v-model、v-on、v-bind和自定义指令第4章

样式绑定4.1

绑定HTML样式字符串语法对象语法数组语法直接绑定静态类名适用于固定样式场景根据条件动态切换类名键为类名,值为布尔表达式组合多个类名或条件对象Vue3会智能合并常规class属性和v-bind:class绑定的类名4.1.1

对象控制样式基本用法多字段切换与普通class共存计算属性绑定通过对象动态切换class属性值对象中可传入多个字段同时动态切换多个样式类复杂逻辑可用计算算属性返回对象v-bind:class可与普通class属性共存两者自动合并,不互相覆盖类名存在与否取取决于对应布尔值保持模板简洁,逻辑集中管理适合需要根据状态频繁切换样式的场景4.1.2

数组控制样式数组语法条件切换将数组传给v-bind:class在元素上应用一个样式列表在元素上应用一个样式列表使用三元表达式切换样式数组中可混合对象语法如[{active:isActive},errorClass]数组中每个元素对应一个类名多条件时对象语法更简洁数组语法适合组合多个来源的类名,对象语法适合条件判断4.1.3在组件中的应用单根元素组件多根元素组件class属性添加到组件根元素上不会覆盖根元素已有的样式需通过$attrs属性指定接收元素明确指定哪个根元素接收class数据绑定的class同样适用样式自动透传合并避免样式透传歧义配合scopedstyle实现封装组件样式透传是Vue3样式系统的核心特性4.2

绑定内联样式:对象语法对象语法v-bind:style绑定JavaScript对象CSS属性名支持驼峰式或短横线分隔数据对象绑定可在data中单独定义样式对象模板更清晰,避免内联冗长通过v-bind:style绑定该对象计算属性绑定复杂样式逻辑可用计算属性返回自动响应依赖数据变化缓存结果,性能更优对象语法看起来像CSS,但实际是JavaScript对象4.2.1对象描述样式4.2.2

数组描述样式使用场景数组语法v-bind:style的数组语法基础样式+覆盖样式组合多个条件样式对象合并将多个样式对象应用到同一元素如v-bind:style="[baseStyles,moreStyles]"后定义的样式可覆盖前面的同名属性分离公共样式与动态样式代码结构更清晰数组语法适合组合多个来源的样式对象4.2.3自动添加前缀

4.2.4多重值自动添加前缀多重值样式Vue3自动侦测需前缀的CSS属性为style属性赋多个带前缀值的数组只渲染最后一个被浏览器支持的值自动添加浏览器引擎前缀如transform自动添加:-webkit-(Chrome/Safari)-moz-(Firefox)、-ms-(IE)如display:[-webkit-box',"-ms-flexbox",'flex]浏览器支持flex则只渲染flex开发者无需手动处理前缀兼容性自动降级4.3实例：实现列表奇偶行不同样式步骤1步骤2步骤3步骤4定义样式:为偶数行定义样式规则v-for循环:使用v-for指令循环输出表格行携带索引参数index奇偶判断:动态绑定:如使用v-bind:class对象语法(index+1)%2===0加1后判断对应实际行号even{background-color:#cdedcd}索引从0开始条件为true时应用even样式实现奇偶行交替着色第5章

组件应用5.1

组件基础概念独立可复用根组件Root每个组件是完整的Vue实例,支持data、me-thods、生命周期钩子等配置组合嵌套Header组件Main组件Footer组件通过组件树构建复杂界面,实现功能模块的高度复用接口通信PaginationArticleList通过props和events进行组件间数据传递,降低系统耦合度5.1.1基本使用方法组件定义与使用组件复用关键规则data必须为函数组件中data选项必须声明为函数而非对象每次实例化返回全新数据副本,确保状态独立为什么不能用对象对象形式会导致所有实例共享同一数据引用造成状态污染,破坏组件封装性使用ponent0)定义组件组件可接收data、computed、methods等选项(el除外)注册后以自定义元素方式使用关键语法要求ponent(组件名",{data,template,..)5.1.3组织结构局部注册全局注册使用ponent()注册注册后可在应用任何组件模板中使用适合通用性强的基础组件在组件的components选项中注册仅限父组件模板中使用适合特定场景的专用组件ponent("ButtonCounter',{...)components:(ButtonCounter:MyComponent}命名规则自闭合限制注册用PascalCase,HTML模板中用kebab-case引用如ButtonCounter引用时写HTML模板中不能使用自闭合写法非HTML模板中鼓励自闭合以表示无内容组件5.1.4

钩子函数setup0取代beforeCreate和created,封装大部分组件代码onBeforeMountonMounted按需导入钩子函数需从vue中导入,保持项目轻量化组件挂载前后的钩子importonBeforeUpdateonMounted,onUpdated}fromvue其他钩子onActivated/onDeactivated(keep-alive相关)onErrorCaptured(错误捕获)数据更新前后的钩子onUnmounted数据卸载前后的钩子组件卸载前后的钩子setup0是CompositionAP的入口,取代了beforeCreate和created5.2.1

通过props向子组件传递数据定义props传递数据使用数据21在子组件props选项中声明自定义属性props:['title']子组件内部可直接访问prop值模板中通过插值表达式渲染父组件通过属性向子组件传值作为自定义属性写在组件元素上案例:传统文化与生态保护子组件SeasonCard定义seasonData属性父组件传入节气数据对象子组件展示节气名称、气候特征、传统习俗、生态保护信息5.2.2

跨层级传递

5.2.3监听事件5.2.2Provide/Inject5.2.3$emit自定义事件祖先组件子组件触发this.$emit(\使用provide提供数据provide(\使用inject注入数据触发事件并传递参数后代组件父组件监听通过v-on指令监听子组件事件接收子组件传递的数据constdata=inject(\注意事项适用场景跨多层组件传递,避免逐层传递props如主题切换、用户信息共享注意事项事件名不自动转换大小写触发名与监听名需完全匹配provide/inject实现跨层级传递,$emit实现子→父通信5.3插槽5.3.1基本插槽5.3.2编译作用域5.3.3后备内容子组件中用声明占位符插槽内容在父组件作用域编译slot内可设置默认内容父组件传入的内容替换占位位置可访问父组件的数据父组件未提供内容时显示默认值实现组件结构固定、内容可定制不能访问子组件的数据提供内容时覆盖默认值子组件模板父组件传入内容替换占位符声明默认内容→父组件未传入→显示默认内容5.3.4具名插槽5.3.5作用域插槽5.3.6动态插槽名子组件通过slot绑定数据父组件用v-slot:default='slotProps接收解决插槽内容需访问子组件数据的问题slotProps包含所有插槽propslot元素用name属性定义命名插槽V-slotheader指定内容分发目标一个组件可包含多个具名插槽v-slot:[dynamicSlotName]动态指定插槽名根据运行时变量决定内容分发位置具名插槽→多区域分发,作用域插槽→子→父数据传递5.4.1动态组件统一渲染入口ComponentAComponentBcurrentComponent切换状态管理优化代码复用提升动态组件=component标签+is属性+可选KeepAlive缓存性能优化5.4.2

异步组件代码分割性能优化大型应用拆分为多个小块减少初始包体积,加速实现懒加载页面渲染按需加载错误边界仅在需要时加载组件,支持加载状态和错误处理,提升用户体验节省带宽资源方式2(Vue3.2+)直接返回Promise简洁写法,适用于简单场景方式1使用defineAsyncComponent包装import{defineAsyncComponent}from"vue"5.5

案例5.5.1日历组件5.5.2弹出层组件核心功能年月切换、日期选择、闰年判断月份首日星期计算、空格填充对齐设计思路弹窗独立于业务模板,挂载到body通过JavaScript动态创建和销毁实现步骤创建create()函数接收组件配置创建实例并挂载到body组件关闭时移除DOM并销毁实例调用方式create(Notice,(title,message,duration).show0设计思路核心功能实现步骤关键技术点关键技术点调用方式watch监听月份和年份变化methods封装日期计算逻辑v-for渲染日期列表点击事件切换选中日期组件化实践:从基础组件到复杂交互场景的完整应用第6章

逻辑复用6.1.1

组合式函数概念1无状态逻辑有状态逻辑接收输入后立即返回输出,不涉及内部状态管理示例:日期格式化函数formatDate(date)管理随时间变化的数据状态,涉及响应式状态和生命周期示例:跟踪鼠标位置useMouse()特点:需要响应式系统支持,可跨组件复用特点:纯函数,可测试性强组合式函数=基于组合式API封装有状态逻辑的函数,命名以use开头6.1.2

使用ref封装响应式状态步骤2步骤3步骤4步骤1定义状态:使用ref()创建响应式变量编写更新逻辑:绑定生命周期:暴露状态:返回普通对象x,y{x,y}x,y组件解构后仍保持响应性定义update(event)函数,通过event.pageX/pageY更新坐标onMounted中添加mousemove监听onUnmounted中移除监听X、y,初始值为0返回非响应式对象而非响应式对象,避免解构丢失响应性连接6.2.1

插件的概念插件vs组合式函数插件应用场景插件=应用级/组合式函数=组件级添加全局方法或属性注册全局组件或指令集成第三方服务提供应用级功能状态范围插件=一次性全局注册/组合式函数=按需在组件中使用复用粒度插件=全局共享功能/组合式函数=组件内响应式逻辑使用场景插件=包含install()方法的对象,或直接是一个安装函数6.2.2

定义插件注册全局组件注册全局指app.directive()注册自定义指令,如ponent()注册可在任意组件中直接使用的组件v-auto-greet依赖注入全局方法/属性app.config.globalPropertiesvide()注入状态和方法,组件通过inject()获取添加全局方法install(app,options)接收应用实例和可选配置选项6.2.3

注册插件注册插件调用app.use(plugin,options)安装插件第一个参数为插件对象,第二个参数为配置选项自动阻止多次注册相同插件示例:app.use(greetingPlugin,(gretings:()全局组件全局指令inject注入v-auto-greet:evening按钮点击问候,支持传参inject("greeting")获取状态和方法,灵活调用模板中直接使用,无需导入根据插件功能灵活选择一种或多种使用方式6.3.1

混入的概念混入定义混入对象可包含任意组件选项组件使用mixins:[myMixin]引入所有混入选项被混合到组件本身选项中数据对象同名属性时组件数据优先级更高钩子函数合并为数组,混入钩子先于组件执行方法/组件/指令对象合并,冲突时组件覆盖混入侦听器合并为数组,混入侦听器先执行Vue3仍支持混入,但推荐使用组合式函数替代6.3.2

混入的局限性命名冲突多个混入同名数据或方法时难以确定最终生效项两个混入定义同名count和increment,行为不确定隐式依赖混入逻辑依赖组件中的方法但未明确声明混入在mounted中调用fetchlUser0,组件必须自行实现可维护性差理解组件完整行为需在多个混入文件间穿梭,修改通用功能难以评估影响范围Vue3推荐组合式函数解决混入问题,维护Vue2项目时仍可使用6.4.1

DOM基础JavaScript操作DOMDOM树结构Document为根节点,包含HTML子节点;HTML包含head和body两个子节点;每个节点对应一个可编程的DOM对象;可创建、修改、删除节点或添加事件获取对象:getElementByld/querySelector/querySelectorAll添加对象:createElement+appendChild更改样式:SPA频繁操作DOM带来性能瓶颈,催生虚拟DOM方案element.style.fontSize/element.style.colorDeemalekcelemslosDocumen'styitheausearanidtroidepruenavoitsdleSize.InoustrouresnpoceddetpercontstyleSventalespeletoreatty,ofthecoment.coranonrgtS6.4.3

虚拟DOM与渲染函数h(函数虚拟DOM创建虚拟节点的核心函数由VNode实例组成的树形结构,代表真实DOM的抽象操作JavaScript对象比操作真实DOM更轻更新前先比较新旧虚拟DOM差异异步更新队列减少直接操作DOM的次数模板适合简单场景,渲染函数适合复杂动态逻辑6.4.4

JSX与函数式组件JSX函数式组件JavaScript的XML扩展,在JS中直接书写HTML结构,保留模板清晰性的同时获得渲染函数的灵活性需安装@vitejs/plugin-vue-jsx并配置无响应式状态、无组件实例的纯函数组件接收props和context参数适合简单展示性组件6.4.5函数式组件6.5案例:渲染帖子列表Listltem组件:渲染单个帖子,展示标题/作者/时间/点赞数ContentList组件:管理帖子数据,渲染整个列表使用h()函数+resolveComponent构建动态列表第7章

Vue3

路由7.1Vue3路由基础URL与组件精准绑定特定URL对应特定组件,无需后端额外开发路由接口什么是VueRouter无刷新跳转与数据传递Vue3官方路由管理器,管理URL路径与Vue组件的映射关系,实现URL变化但浏览器不刷新页面的跳转效果router-link替代a标签,支持动态路由参数和查询参数传递数据复杂场景路由管控嵌套路由、路由守卫、路由懒加载在HTML与JavaScript中使用VueRouterHTML中使用JavaScript中使用步骤一:引入vue-router@4脚本步骤一:定义路由组件2.步骤二:定义路由配置数组routes径3.步骤三:创建router实例并传入routes4.步骤四:创建应用实例并挂载router步骤二:使用router-link组件创建导航链接,通过to属性指定路径3.步骤三:使用router-view组件作为路由出口,渲染匹配到的组件7.2

动态路由将给定模式的URL映射到同一个组件,适用于内容不同但结构相同的页面/product/2动态段:id/product/1/product/abcProductDetail用冒号:表示动态段,捕获URL中的可变部分作为参数7.2.1

获取路由参数获取路由信息constroute=useRoute()CompositionAPI方式获取当前激活路由访问动态参数route.params.idparams对象包含从URL解析出的动态参数模板中直接使用useRoute用于组件逻辑中,$route用于模板中$route.params.id模板中可直接使用$route便捷访问7.2.2

高级匹配模式自定义正则表达式右上格小字号标题(path:(\user//:idd9+))可重复参数内容*都配零个或多个段,+配配一个或多个段参数以数库形式存于pathMatch中限制则参数格式,如仅匹配数字左下格小字号标题右下格小字号标题可选参数内容大小写下敏感,内容sensitive:true默认在区对大多底宙,加加sensitive使用区分path://\search//query参数可出现零次或一次7.2.3

匹配优先级静态路由path:"/about"优先级最高,无动态部分带静态前缀的动态路由有明确静态前缀同级路由按定义顺序,更具体的放前面多动态段路由"/post/:category/:id"动态段越多越具体自定义正则动态路由"/user/:id(\d+)"正则越严格优先级越高通配符路由"/:pathMatch(.*)*优先级最低,通常处理4047.3.1-7.3.2

动态路由与嵌套路由响应路由参数变化嵌套路由同一组件被复用时setup只执行一次,需显式监听参数变化/dashboard父组件需提供router-view作为子路由渲染出口使用watch监听route.params通用响应式方案settingsprofile使用onBeforeRouteUpdate组件内导航守卫,推荐方案子路由路径不加斜杠settings7.3.3

导航守卫全局前置守卫路由独享守卫组件内守卫onBeforeRouteEnter、onBeforeRouteUpdate、onBeforeRouteLeaverouter.beforeEachbeforeEnter直接定义在路由配置上,仅进入该路由时触发贴近组件业务逻辑,分别在进入前、更新时、离开前调用每次导航触发时异步执行,常用于登录验证应用场景:权限验证、数据预加载应用场景:角色权限检查7.3.4路由元信息&7.3.5路由懒加载路由元信息metameta:{requiresAuth:true,title:"个人中心"}为路由添加自定义数据,可在守卫或组件中访问结合afterEach钩子可动态设置页面标题路由懒加载component:import('../views/About.vue')可通过webpackChunkName将多个组件打包到同一chunk初始加载只下载当前页面代码,访问路由时才加载对应组件7.3.6编程式导航

编程式导航高级技巧与实践总结router.push(location)跳转到新页面,添加history记录keep-alive缓存组件保留页面状态scrollBehavior自定义滚动位置router.replace(location)替换当前页面,不添加history记录router.go(n)在history记录中前进或后退n步优先使用命名路由集中管理权限逻辑于全局守卫始终使用路由懒加载优化首屏第8章

axios异步请求8.1.1

axios简介axios是一个基于Promise的HTTP库,可用于浏览器和Node.js环境跨端支持拦截机制PromiseAPI浏览器创建XMLHttpRequests,Node,js创建HTTP请求可拦截请求和响应,统一处理逻辑原生支持Promise链式调用优雅处理异步数据转换请求取消安全防护自动转换请求数据和响应数据客户端支持防御XSRF攻击,自动转换JSON数据支持取消正在进行的请求8.1.2

安装axiosnpm安装bower安装CDN引入npminstallaxiosscript标签引入适用于快速原型开发适用于Vue3脚手架项目,推荐方式可配合vue-axios插件一起安装bowerinstallaxios适用于传统前端项目无需构建工具,直接在HTML中引入npminstallaxiosvue-axios安装vue-axios后,组件内可通过this.axios调用8.1.3

基本使用方法GET请求POST请求通过URL传递参数,使用params配置对象传递查询参数;成功时调用then()回调处理响应;失败时调用catch()回调处理错误通过请求体发送数据,比get多一个data参数;同样使用then/catch处理响应与错误关键语法:axios.post(url,data)关键语法:axios.get(url,{params})并发请求使用axios.all()同时发起多个请求;配合axios.spread()将结果展开分发关键语法:axios.all(fn1,fn2).then(axios.spread(callback))8.2AxiosAPIaxios(config)通过配置对象指定method、url、data等参数适用于需要灵活配置的复杂请求场景关键语法:axios(method,url,data})config配置发送请求axios(url[,config])axios(url[,config])axios(url[,config])直接传入URL,默认使用GET方法简化写法,适用于简单请求axios(\关键语法:接收响应config方式是axios最灵活的调用方式,所有别名方法底层都基于此请求方法别名创建实例无需在config中指定method,直接使用对应方法使用axios.create()创建自定义实例可预设baseURL、timeout、headers等配置查询数据数据数据更新数据更新数据删除数据常用授求axiosaxios.get(url)axios.post(ur,data)axios.put(url,data)axios.delete(url)axios.request(config)关键语语:constinstance=axios.createlbaseURL,timeout,headers})实例上同样可使用所有别名方法不同模块可创建不同实例,配置互不干扰每个别名函数自动设置对应的HTTP方法8.2AxiosAPI8.3

适配网络请求urlmethod请求方法,请求的服务器地址,必填参数默认值为getbaseURL自动拼接在url前面便于使用相对路径headers自定义请求头信息dataparamsURL查询参数,以对象形式传递请求体数据,用于POST/PUT/PATCHtimeout请求超时毫秒数,0表示无超时responseTypejn响应数据类型,默认jsonurl为必填项,其余配置均有默认值8.3适配网络请求响应结构默认配置data:服务器提供的响应数据全局默认值:axios.defaults.baseURLstatus:HTTP状态码,如200axios.defaults.headers:设置通用请求头实例默认值:创建实例时预设配置statusText:HTTP状态信息,如OK创建后修改:instance.defaults.headersheaders:服务器响应头信息config:请求时的配置信息配置优先级:请求config>实例defaults>库默认值8.4

拦截器发送请求请求拦截器服务器响应拦截器then/catch处理请求拦截器响应拦截器在请求发送前拦截,可修改请求配置添加自定义headers、转换请求数据关键语法erceptors.request.use(onFulfilled,onRejected)在响应到达then/catch前拦截统一处理响应数据、错误状态码关键语法erceptors.response.use(onFulfilled,onRejected)使用eject()可移除已添加的拦截器在键语语法Xeaix用户有拉测加可设产仲需台蓝明浙,连备分享符合可请到数的用户导清励,更扶拦截器8.4

适配网络请求错误处理取消请求使用CancelToken创建取消令牌关键语法constsource=CancelTokensource()Ocatch回调中区分三种错误类型:error.response服务器返回了响应,状态码超出范围可获取status、data、headers等错误详情(代码样式标注);第三点将token传入配置配置的cancelToken领域第四点利用source.cancel(message)source.cancel(message)source.cancel(message)取消请求第五点通过axes.isCancel)判断利用为取消操作error.request请求已发送但未收到响应检查网络连接或服务器状态error.message请求配置出错检查请求URL、参数等配置第9章

VueCLI部署项目9.1.1

什么是VueCLI

CLI-全局安装,提供vue命交互式项目脚手架CLI服务一零配置原型开发局部依赖,构建于webpack之上CLI插件-可升级的运行时依赖以@vue/cli-plugin-开头,提供可选功能9.1.2安装VueCLI9.1.2npminstall-g@vue/cliyarnglobaladd@vue/cli升级验证安装(npmupdateg@vue/cli)(vue--version)项目内升级使用vueupgradevuebuildvuecreatevueserve零配置启动开发服务器,适合快速原型开发零配置构建生产环境包创建完整新项目-p使用预设-d默认预设--bare省略新手引导-O打开浏览器-C复制URL-t指定构建目标-d指定输出目录9.1.2创建HelloWorld项目9.1.4了解VueCLI项目结构node_modules/-第三方依赖用接杵个约分鞋src目录是开发核心区域,包含入口文件main.js、根组件App.vue及自定义组件public/-模板与资源文件主体极文件hello-world/src/-主体代码(assets、components、App.vue、main.js)第件文件配置文件-packagejson、babel.configjs等9.2.1了解webpack模块依赖图Dependency入口Entry输出Loader转换BundleGraphwebpack是静态模块打包工具,构建内部依赖图,映射项目所需每个模块,生成一个或多个打包文件插件PluginsLoader对象形式函数形式confgureWebpack:{plugins:[..]configureWebpack:config{..}对象会被webpack-merge合并到最终配置中可基于环境变量条件修改配置注意:部分webpack选项需通过vue.config.js间接修改,如outputDir代替output.path9.2.2配置webpack-confgureWebpack修改Loader选项替换Loader修改插件选项config.module.rule()svgRule.uses.clear()后添加新loaderconfig.plugin()..tap(args=>{).use().tap()VueCLI使用webpack-chain维护内部配置,提供具名的loader规则和插件定义9.2.2配置webpack-confgureWebpack审查webpack配置vueinspect>output.jsvueinspect--rulevuevueinspect--pluginhtmlvueinspect--rules以文件方式使用配置审查特定规则路径:node_modules/@vue/cli-service/webpack.config.js,供IDE或CLI工具访问通过--rule参数指定规则名称查看详细配置9.2.2配置webpack-confgureWebpack9.3构建与部署VueCLI项目构建目标通过-target选项指定构建目标,默认应用模式:HTML注入资源、第三方库独立分包、小资源内联部署将dist目录部署到静态文件服务器,确保正确确的publicPath配置本地预览serve-sdist-s参数启用SPA模式,处理路由问题第10章

Vuex组件状态管理10.1

Vuex介绍官方状态管理方案Vuex是Vue.js官方状态管理解决方案,通过集中式状态存储和规范化数据流转构建可维护的应用架构五大核心特性单一状态树作为唯一数据源、显式声明状态变更逻辑、封装异步操作、派生状态计算、模块化组织单向数据流机制Stor容器强制实施View-Actions-Mutations-→State→View的数据流转,配合开发者工具实现状态快照和时间旅行调试设计思想来源借鉴Flux、Redux和TheElmArchitecture的设计思想,专为Vue3设计,充分利用细粒度数据响应机制与Pinia的关系Vue3推荐使用Pinia作为新一代状态管理方案,但Vuex4仍保持对Vue3的兼容支持View2驱动应用的数据源以声明方式将State映射到视图3ActionsView→Actions→响应用户输入导致的状态变化MutationsMutations接收Actions提交,变更StateState→State→ViewActionsVuex的解决方案多组件共享状态的问题将共享状态抽取为全局单例管理,组件树形成巨大视图,任意组件可获取状态或触发行为多个视图依赖同一状态时传参繁琐,嵌套组件层层传递困难,兄弟组件件间状态同步无力10.1

Vuex介绍10.2Vuex安装包管理器安装独立构建方式使用npm安装:执行'npminstallvuex@next--save'命从GitHub克隆代码仓库到本地使用yam安装:执行yarnaddvuex@next--save'命进入vuex目录,执行yarn安装依赖注意事项:需安装支持Vue3的vuex@next版本,支持Vue2的版本名为Vuex(不带@next)执行yarnbuild构建项目适用于需要使用dev分支最新版本的场景10.3Vuex的核心容器2不可直接修改改变store状态的唯一途径是显式提交mutation,便于跟踪每一个状态的变化响应式状态组件注入Store当Vue3组件从store读取状态时,若状态发生变化,组件会得到高效更新通过app.use(store)安装,组组件中使用this.Sstore访问store实例关键语法createStore(state((.,mutations:(.)app.use(store)this.Smit'type')this.Sstore.statemapState辅助函数直接获取状态在计算属性中返回store.state每当store.state.count变化,计算属性重新计算并触发DOM更新Vuex通过插件系统将store注入所有子组件解决组件获取多个状态时的冗余问题对象写法:"mapState({count:state=>state.count,countAlias:"count"})"数组写法:"mapState("count))])映射同名属性"组件通过this.Sstore访问,无需步频繁导入对象展开运算符:"..mapState(...3混入外部computed对象10.3Vuex的核心容器10.4

Vuex状态获取方法派生状态的需求有时需要从store的state中衍生状态,例如对列表进行过滤并计数,在组件中重复计算会冗余定义Getter函数在store的getters中定义函数,接受state作为第一个参数,也可接受其他getter作为第二个参数,实现getter之间的依赖State→Getter→Component属性访问方式Getter暴露在store.getters对象中,以属性形式访问,组件中使用计算属性访问:this.Sstore.getters.xx10.4Vuex状态获取方法mapGetters辅助函数函数访问将store中的getter映射到局部计算属性数组形式:...mapGetters("doneTodosCount","anotherGetter"])重命名形式:..mapGetters(doneCount:"doneTodosCount"})使用对象展开运算符混入computed对象通过getter返回一个函数,实现给getter传参适用场景:对store中的数组进行查询关键语法:getter返回(state)=>(id)=>的(state)=>(id)=>的柯里化函数调用方式:store.getters.getTodoByld(2)10.5Vuex状态同步更改方法提交Payload定义Mutation对象风格提交通过mit传入额外参数,即载荷;建议载荷使用对象形式;调用方式:mit(increment',10)在mutations中定义,包含type类型和handler回调函数;handler第一个参数是state;handler不能直接调用,需通过mit触发直接使用包含type属性的对象提交;整个对象作为载荷传给mutation函数;调用方式:mittype:"inc-rement,amount:10);handler接收payload对象并读取属性更改store状态的唯一方法是提交mutationTe10.yourmicatehaverangrebitorecomoratic.hadgmdltypenuhcreetateandma10.6Vuex状态异步更改方法ActionvsMutation分发ActionActin提交的是mutation,而非直接变更状态通过store.dispatch(触发:store.dispatch(increment')异步示例:在action内部使用setTimeout执行异步操作后commit组件中使用this.Sstore.dispatch0分发Action可以包含任意异步操作Action函数接受context对象,可调用context