06vue生命周期函数

课题第3章Vue基础第二节：Vue生命周期概念与使用授课时间第二周教学目的通过本节学习，使学生能够理解Vue3生命周期函数的概念和作用。能够掌握Vue3常用生命周期钩子函数的使用方法。教学重点Vue生命周期的使用。教学难点运用Vue3生命周期函数进行组件的开发。教学过程教学环节教学内容教学方法、手段及时间分配课前复习引入新课新课讲解代码演示学生实践讲授案例实践课堂讨论总结提问：1.Vue中模板语法有几种情况？2.如果有一段HTML片段，想要在页面中展示，需要用哪个指令？3.如果想绑定一个元素的属性需要用哪个指令？第二节：Vue生命周期概念与使用一、ES6基本语法（补充知识点）（一）ES6语法简介ES6（ECMAScript2015）是JavaScript语言的一种标准，引入了许多新的语法特性，以提高开发者的编程效率和代码的可读性。ES6语法的主要目标是解决JavaScript在过去版本中的一些不足，如不支持模块化、缺乏对类型检查的支持等。（二）箭头函数箭头函数是一种简洁的函数表达式，使用=>符号定义。箭头函数没有自己的this，arguments，super或new.target。（三）模块化ES6支持模块化，使得代码更易于维护和重用。使用import和export关键字进行模块导入和导出。（四）解构赋值解构赋值是一种方便的赋值方式，可以从数组或对象中提取值并赋给变量。（五）新特性let和const关键字：用于声明变量，let声明的变量可以修改，const声明的变量不能修改。模板字符串：使用反引号（`）包裹字符串，可以在字符串中嵌入变量或表达式。箭头函数二、Vue3生命周期函数概述Vue3引入了全新的响应式系统，生命周期函数也发生了相应的变化。Vue3的生命周期钩子函数分为四个阶段：创建前、创建后、更新前、更新后。生命周期钩子函数的使用可以帮助我们更好地管理组件的状态和行为。三、常用生命周期钩子函数（一）onMounted()：注册一个回调函数，在组件挂载完成后执行。（二）onUpdated()：注册一个回调函数，在组件因为响应式状态变更而更新其DOM树之后调用。（三）onUnmounted()：注册一个回调函数，在组件实例被卸载之后调用。（四）onBeforeMount()：注册一个钩子，在组件被挂载之前被调用。。（五）onBeforeUpdate()：注册一个钩子，在组件即将因为响应式状态变更而更新其DOM树之前调用。（六）onBeforeUnmount()：注册一个钩子，在组件实例被卸载之前调用。（七）onErrorCaptured()：注册一个钩子，在捕获了后代组件传递的错误时调用。借助于大模型来查询，生命周期函数的使用场景，以小组为单位讨论，之后分享。课堂内容总结第一课时提问（4分钟）语言过度（1分钟）课件讲解（15分钟）代码开发：完成实验演示代码开发（7分钟）代码练习（8分钟）第二课时课件讲授（15分钟）案例演示：通过讲解Vue3生命周期函数的概念、作用和变化，帮助学生理解生命周期钩子函数的作用。通过实际案例演示，让学生掌握Vue3生命周期钩子函数的使用方法。（10分钟）讨论和分享（15分钟）总结（5分钟）课堂小结作业课堂小结：通过本次教学，学生应能掌握es6基本语法，了解什么是生命周期函数，以及使用生命周期函数，提高前端