前端技术11侦听器

课题第3章Vue基础第三节vue计算属性与侦听器授课时间第四周教学目的学会使用Vue3的侦听器（watch）来监听数据变化。理解侦听器的基本概念和作用。掌握侦听器的使用方法和注意事项。教学重点侦听器的概念和使用方法。教学难点侦听器选项deep,immediate。教学过程教学环节教学内容教学方法、手段及时间分配课前提问新课讲解代码演示实践操作讲授案例修改区别讲解总结提问：针对Vue计算属性，有哪些知识点，选人进行分享，每位同学说一个即可。第三节vue计算属性与侦听器一、什么是侦听器Vue3侦听器简介:侦听器是Vue3中用于监听数据变化的一种机制。当被侦听的数据发生变化时，侦听器会自动执行相应的操作。当一个data里面的变量数据改变的时候，我们可能会希望做一些操作用来相应这个数据的变动。Vue提供了侦听器来帮助我们进行数据变化的侦听。侦听器内部的对象是一个方法。二、创建和使用侦听器在Vue3中，可以使用watch函数来创建一个侦听器。watch函数接收两个参数：第一个参数是要侦听的数据源，第二个参数是一个回调函数，当数据源发生变化时，回调函数会被执行。使用侦听器的步骤：1.引入方法import{watch}from"vue“2.使用上面代码的逻辑是：当hours变化的时候，将hours变化后的值换算赋给mins。要注意的是：watch里面的变量名要与data里面你要监听的数据的变量名一致。例如上面代码中我监听的是data中hours变量的变化，那么在watch中我写的就是hours。三、侦听器选项watch函数还可以接收一个配置对象，用于设置侦听器的选项。常见的选项有：immediate（是否立即执行回调函数）、deep（是否深度监听对象内部属性的变化）等。四、侦听器使用注意事项避免在生产环境中使用侦听器，因为它们会破坏响应式系统的性能。尽量避免在组件内部使用全局的侦听器，以减少性能开销。当监听器监听一个对象时，使用handler定义当数据变化时调用的监听器函数，还可以设置deep和immediate属性。Deep属性在监听对象属性变化时使用，表示无论该对象的属性在对象中的层级有多深，只要该属性的值发生变化，都会被监测到。该选项的值为true监听器函数在初始渲染时并不会被调用，只有在后续监听的属性发生变化时才会被调用；如果要监听器函数在监听开始后立即执行，可以使用immediate选项，将其值设置为true。四、侦听器与计算属性区别1．功能不同，计算属性用于解决模板语法冗余问题。侦听器侦听data中某一个数据变化2．计算属性有缓存机制，侦听器没有缓存机制3．计算属性不支持异步操作，侦听器支持异步操作4．计算属性可以给vue新增属性，侦听器必须是data中已有属性5．计算属性只要使用了就会立即执行一次，侦听器默认只有当数据第一次执行才会执行6．侦听器可以通过设置immerdiate为true，也可以像计算属性一样立即执行一次。本次课内容总结，侦听器使用方式及选项参数，和侦听器与计算属性区别。第一课时提问（5分钟）课件讲授（20分钟）课堂练习：学生仿照老师的操作修改项目代码，完成侦听器使用。演示（10分钟）课堂练习（10分钟）第二课时课件讲解（15分钟）课堂练习：学生仿照老师的操作修改项目代码，自己完成购物车功能。（15分钟）理解记忆（10分钟）总结（5分钟）课堂小结作业课堂小结：通过本次课学习，学生学会了什么是侦听器，如何使用侦听器。总结与反思通过本节课的学习，我们了解了Vue3