《Vue企业开发实战》电子教案23-侦听器

《网站开发技术（VUE）》·教案23第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目8计算属性和侦听器授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目8的任务2。掌握watch侦听数据变化，能区分计算属性与侦听器，完成页码变化等需要副作用的练习。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务2侦听器什么是侦听器；computed与watch对比；适合异步或开销较大的任务；页码变化示例教材8.2三、学情分析学生已能用computed算总价，但容易把“请求接口、写日志、改标题”也塞进computed。本课要求能说清：能算出来的用computed，有副作用的用watch。四、教学目标（一）知识目标1.理解watch用于响应数据变化并执行副作用。2.能对比计算属性与侦听器的适用场景。3.了解immediate、深度侦听等基本选项（点到即可）。（二）能力目标1.能为某一数据编写watch。2.能在页码变化时执行模拟请求或过滤。3.能判断一段需求该用computed还是watch。（三）素质目标1.把复杂逻辑从模板抽到computed/watch。2.不在计算属性里发请求。3.规范操作。五、教学重点与难点类型内容突破办法重点computed与watch怎么选对照表：有没有返回值、有没有副作用难点页码变化后拉数watch里模拟请求，computed只算展示六、教学方法与准备方法：对比表、页码案例、理实一体。导入用“页码变了要重新请求列表”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入提问：总价变了只是算出来，页码变了要重新取数，这两件事一样吗？引出watch。判断购物车总价该不该发请求。用有无副作用划界。明确学习目标出示目标：会写watch，会选题。对照目标勾画。对准课标区分二者。任务2讲解讲watch回调、新旧值。对照表：computed返回值可缓存；watch执行副作用。演示页码变化打印或模拟加载。完成对照表。跟写一个watch。先选题后写代码。上机练习按教材作业方向：页码变化触发处理（过滤或模拟请求）；展示仍用computed。改页码能看到副作用发生，展示正确。项目8收口。小结与作业回扣口诀。预告项目9接入地图、Pinia和二维码。保存示例。转向插件与状态。课堂检测：①watch适合做什么？②为什么不要在computed里发请求？③页码变化用watch还是computed来拉数？八、上机任务与评价练习任务要求合格标准常见问题上机1侦听某一数据并执行副作用（日志或模拟请求）数据变化时回调执行写成computed、依赖写错上机2页码变化后更新列表（教材作业方向）页码与列表对应，逻辑分层清楚在模板里直接请求过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.用表格对比计算属性与侦听器。2.实现页码变化相关练习（教材作业方向）。书面作业：各举一个大觅场景说明该用computed还是watch；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：____________________________________