Vue.js3前端开发基础及项目化应用教案单元6组合式API_教学设计.docx

《Vue.js3前端开发基础及项目化应用教案单元6组合式API_教学设计.docx》由会员分享，可在线阅读，更多相关《Vue.js3前端开发基础及项目化应用教案单元6组合式API_教学设计.docx（9页珍藏版）》请在优知文库上搜索。

1、Vue.js前端开发基础及项目化应用教学设计课程名称：Vuejs前开发基础及项化应用授课年级：授课学期：学年第一学期一教师找名：2023年09月09日课题名称单元6组合式APl计划学时6学时内容分析VUe中提供了两种编写组件的方式：选项式API和组合H主要用于Vue2及以前的版本，后者则是Vue3中新引入的特性重对同一功能的逻辑关注点相关代码的汇集，适用于大型项目的开发，具有代码可复用性高和可维护性强的特点。本单元将差异，并重点介绍组合式APl编写组件的方法，以及相关的知setup函数、响应性API的原理和provide/injecto通过使用两种;询历史名城相关诗词”任务，使得学习者更好地理

2、解组合式公掌握其使用方法。；APL前者.之一，它注中复杂组件介绍两者的识点，包括方式实现“查LPI的特点，教学目标及基本要求1 .了解组合式API特点2 .理解响应性原理3 .掌握setup函数应用方法4 .掌握响应性API的使用5 .能够利用provide/inject实现组件间传值教学重点1 .理解响应性原理2 .掌握SeUlP函数应用方法3 .掌握响应性API的使用教学难点理解响应性原理教学方式教学采用教师使用PPT讲解和案例示范相结合的方式教学过程第一课时(组合式APl特点，组合式APl用法，setup函数及其用法)一、创设情境，引入组合式APl概念1 .教师通过应用场景描述，引出组合

3、式APl的必要性。在前面单元中，Vue组件的编写是按照选项来归置代码块的，这种方式被称为选项式APl(OPtionSAPl),它具有易学易用的特点，但代码本身的逻辑关联性却没有得到很好的体现。Vue3引入了新的编写方式一组合式API(CompositionAPI),在程序结构上，它能够对同功能的逻辑关注点进行聚合，便于复杂组件中各功能逻辑的组织。2 .明确学习目标。 了解组合式API的特点 了解setup函数的结构和参数 掌握组合式API编写组件的方法二、进行重点知识的讲解1.教师根据课件，通过对比选项式APl和组合式API,结合实现代码来讲解两者的特点。选项APl组合式APl功Hgl函数ex

4、port default (data()(return ( 功能!响应式数据 功能2响应式数据methods*功畿Ig商S功施2切修音 ).computed：(功能!计IIJe性 ).VVatCM功皖2数正监听器.montedO功能export default ( SetUP 0functonlO BIA功能!函数WI胸式 功帽功倏函数 computed：( 功能1计算属性function20 弓IA功能2函数return functonl /Zifi回切通函Br function? /Zifi回切畿2函数)function19*2球OnMountedOf 功皖1挂或处理2 .教师根据课件，讲

5、解组合式API中SeluP函数的结构、参数PrOPS和参数context的用法。(1)教师根据课件，介绍SelUP函数的结构。setup(prop8fcontext).定义响应式数据.定义功能函数或生命周期的子函数return(返回响应式数据及功能函数.响应式数据.功能函数名)(2)教师根据课件，介绍参数PrOPS的作用和使用方法，并使用代码进行演示。props本身是子组件中的选项，其所定义的属性用于接收父组件传递过来的数据，props以SeUIP函数的参数形式将这些数据提供给setup函数使用。(3)教师根据课件，参数COnIeXI的作用和使用方法，并使用代码进行演ZJsocontext是一

6、个普通的JaVaSCriPt对象，可为setup函数提供其他可能有用的值。3 .教师根据课件，讲解SetUP函数中访问生命周期函数的具体方法，并使用代码进行演示。(1)访问方法在seu函数中访问组件生命周期钩子函数的方法是在每个钩子函数名之前加上“on”，并将函数名首字母改为大写。(2)使用案例讲解访问生命周期钩子函数的具体应用三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括选项式API和组合式APl的特点，组介式APl编写组件的方法，setup函数结构和参数，以及SetUP函数访问生命周期函数。2 .布置随堂练习，检查

7、学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第二课时（响应性原理，响应性APl中reactive/ref,toRef7toRefs）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了组合式API编写组件的方法、setup函数的结构和参数，接下来，本节课将通过实例介绍响应性原理、响应性API的reactivesref、toRcf、toRefs的具体用法。3 .明确学习目标。 了解响应性原理 掌握响应性A

8、Pl的reactive、ref、toRef、toRefs用法二、进行重点知识的讲解1 .教师根据课件，介绍响应性原理相关概念，以及响应式数据实现的流程，并使用代码进行演示。（1）教师根据课件，讲解副作用函数概念。它是会引起副作用的函数，它的执行会直接或间接影响该函数作用域之外的部分。（2）教师根据课件，讲解ProXy概念。Proxy被称为代理，它包装了另一个对象，即在该对象和外界之间设置拦截，以便对外界的访问进行过滤和修改。（3）教师根据课件，讲解响应式数据的实现流程，并使用代码进行演示。2 .教师根据课件，介绍部分常用的响应性APl的应用，包括reactive、ref、toRef和IORef

9、s,并使用代码进行演示。（1）教师根据课件，介绍reactive用法，并使用代码进行演示。reactive根据传入的对象，返回一个深度响应式对象。（2）教师根据课件，介绍ref用法，并使用代码进行演示。ref只接收个基本类型数据，并返回个响应式且可变的ref对象。（3）教师根据课件，介绍toRef用法，并使用代码进行演示。toRef可以将响应式对象中的属性也转换为响应式的，但次只能转换一个属性。（4）教师根据课件，介绍toRefs用法，并使用代码进行演示。toRefs可以将响应式对象中的属性也转换为响应式的，且可以一次性转换所有属性。三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节

10、课知识点进行总结。教师带领学生总结本节课需要了解的响应性原理及相关概念，响应性API中reactiveXref、toRef和toRefs的用法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第三课时（响应性API中的computed和watch）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了响应性原理、响应性APl的reactive、ref、toRef、toRefs的具体用法

11、，接下来，本节课将介绍其它常用的响应性API,包括COmPUted、watch,另外，介绍PrOVide与inject组合实现跨层数据传递。3 .明确学习目标。 掌握computed和watch的用法 掌握provide与inject的用法二、进行重点知识的讲解1 .教师根据课件，讲解响应性API中的computed和watch的使用方法，并使用代码进行演示。（1）教师根据课件，讲解ComPUted的用法，并使用代码进行演示，COmPUted在setup函数中的作用仍然是缓存数据，但使用方法有些不同。computed仅接收一个回调函数作为参数，返回一个ref对象。（2）教师根据课件，讲解Wat

12、Ch的用法，并使用代码进行演示数据监听器WatCh用于侦听指定的数据源，并在回调函数中调用副作用函数。其用法与选项式API中的有些不同。2 .教师根据课件，讲解ProVide和inject的用法，并使用代码进行演示。Vue3provide和inject结合使用，可以方便地实现跨层传递数据的功能。三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括在SetUP函数中，使用computed描述响应式数据的复杂逻辑处理，使用watch监听数据并改变其他数据，利用provide和inject实现跨层数据传递的方法。2 .布置随堂练习

13、，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第四课时（响应性API在项目中的实际应用）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了其它常用的响应性API,包括COmPUted、watch,另外，介绍PrOvide与inject组合用法。接下来，本节课将通过实际应用项目，分别使用选项式APl与组合式API,帮助学习者进一步理解两种编写组件方法的差异性，并能够掌握组合式APl的用法。3 .明确

14、学习目标。掌握组合式API编写组件的方法理解选项式API和组合式API差异性二、进行重点知识的讲解1 .教师根据课件，介绍项目6一一会员中心页面的需求描述、实现思路和代码实现。（1）需求描述会员中心页面包括左侧导航栏和右侧内容，通过导航栏切换到“我的账户”和“我的游记”，并带有过渡效果；“我的账户”中可以动态增加或删除“邮箱”字段，同样也要求使用过渡效果（2）实现思路采用局部组件，构建会员中心页面的“我的账户”和“我的游记”两个部分由于“我的账户”和“我的游记”组件切换时，同一时间只需渲染其中一个，符合TranSitiOn组件应用条件,而“我的账户”表单中“邮箱”字段增加/删除所形成的列表，则

15、需要TranSitionGroUP组件才能实现过渡效果（3）功能实现任务6-1采用选项式API实现任务6-2利用组合式API重构三、归纳总结，布置课后作业2 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括选项式API编写组件的过程，组合式APl编写组件的过程，两种方式的差异性。3 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。4 .使用在线学习平台下发课后作业。第五、六课时（项目实践）项目实践主要针对本单元中需要重点掌握的知识点，通过项目功能实现来加强概念的理解，熟悉并掌握编程知识点的应用，通过项目实践可以考察同学对知识点的掌握情况和应用能力。题目：请利用组合式API实现简易计算器，其中包括加、减、乘和除运算功能形式：单独