前端JS概念之钩子、生命周期及挂载详解
作者：Sapphire～
怎么理解编程中的钩子
钩子（Hook）是编程中一种巧妙的技术，它允许在程序执行的特定节点"插入"自定义代码，从而在不修改核心源码的情况下改变或扩展程序的行为。
下面这个表格汇总了核心要点，快速建立整体认识：
| 方面 | 核心理解 | 常见示例或实现方式 |
|---|---|---|
| 🧩 本质 | 一种事件驱动的回调机制，用于拦截或处理系统、应用或框架中的特定事件或消息。 | onClick, useEffect, @app.before_request |
| 🎯 主要目的 | 扩展功能、行为定制、实现解耦。 | 插件系统、日志记录、权限检查、性能监控 |
| 🔄 工作原理 | 在预定义的"钩子点"（Hook Point）注册回调函数，当特定事件发生时，这些函数会被自动调用。 | 框架提供注册接口（如 register_forward_hook），开发者编写处理函数 |
| 📍 触发时机 | 事件发生前、后，或替代原有处理。 | 请求前/后（before_request, after_request）、组件挂载/更新前/后（onMounted）、方法执行前/后（装饰器） |
| ⚙️ 常见类型 | 函数/方法钩子、事件钩子、消息钩子、系统钩子。 | Python装饰器、Django信号、Windows消息钩子、浏览器事件监听 |
| 🚀 优势 | 解耦、灵活扩展、非侵入式。 | 核心逻辑与扩展逻辑分离，易于维护和添加新功能。 |
| ⚠️ 注意事项 | 性能（过多钩子可能影响效率）、复杂度（逻辑分散可能增加理解难度）、安全（不当使用可能引入漏洞）。 | 避免循环调用，确保必要时的钩子卸载（如系统级钩子）。 |
钩子的常见应用场景
钩子的应用非常广泛，几乎遍布软件开发各个领域：
• Web开发：框架（如 Flask、Django）常用钩子处理请求生命周期（请求前/后、用户认证等）。
• 前端框架：React 的 useEffect、Vue 的 onMounted 等生命周期钩子用于处理组件不同阶段逻辑。
• 操作系统/系统编程：拦截系统消息（如键盘鼠标输入）、API调用监控或修改。
• 深度学习：PyTorch 等框架允许在模型前向/反向传播时注册钩子，提取中间特征或梯度。
• 插件系统：许多软件（如 WordPress）通过钩子机制允许第三方开发者扩展功能。
钩子的一些实现方式
在不同编程语言和环境中，钩子的实现形式多样：
• 装饰器（Python）：通过在函数/方法定义前添加 @decorator_name，包装其行为，是一种常见的函数钩子。
• 回调函数/事件监听：注册一个函数，在特定事件发生时被调用，JavaScript 中的事件处理是典型例子。
• 框架提供的特定机制：许多框架（如 Django 的信号机制、Flask 的请求钩子）内置了钩子系统。
如何理解钩子
- 想象成“事件监听器”：钩子像是预先安放在程序关键点的“监听器”或“哨兵”，一旦关注的事件发生，它就“报告”并执行你设定的任务。
- 理解为“可定制的插入点”：框架或程序预留了许多“插口”（钩子点），你只需把“插头”（自定义函数）插上去，功能便得以扩展。
- 核心是“回调”：钩子的本质是回调函数（Callback Function）的应用。你将一个函数“注册”给系统，系统在适当时候“回调”它。
使用钩子的注意事项
虽然钩子强大，也需谨慎使用：
• 性能影响：钩子函数执行会增加开销，尤其注册过多或包含复杂逻辑时可能影响性能。
• 逻辑复杂度：过度使用钩子可能使代码逻辑分散，增加理解和调试难度。
• 安全风险：恶意代码可能通过钩子注入执行，系统级钩子使用尤需谨慎。
• 兼容性与维护：钩子行为可能依赖特定框架或系统版本，需注意兼容性，并确保正确注册和注销。
总结
简单来说，钩子就是一种“事件发生时，自动执行你预设函数”的机制。它通过解耦和事件驱动，让程序更灵活、易扩展。
怎么理解生命周期钩子
“生命周期钩子”，把它拆成“生命周期”和“钩子”两部分来看。
它本质上是框架或系统在特定对象（如Vue组件、应用程序）创建、更新、销毁等一系列关键时间点，为我们预留的、可以插入自定义代码的“接口”或“机会”。
下面表格汇总了Vue.js中生命周期钩子的核心阶段和主要钩子函数：
| 阶段 | 钩子函数 | 触发时机 | 主要用途 |
|---|---|---|---|
| 创建阶段 | beforeCreate | 实例初始化后，数据观测和事件配置前 | 执行一些不依赖于组件数据的初始化逻辑 |
| | created | 实例创建完成，数据观测已完成 | 发送异步请求、初始化数据、调用方法 |
| 挂载阶段 | beforeMount | 模板编译完成，但尚未挂载到DOM | 挂载前的准备工作 |
| | mounted | 实例被挂载到DOM后 | 操作DOM、初始化第三方库（如图表、地图） |
| 更新阶段 | beforeUpdate | 数据变化后，虚拟DOM重新渲染和打补丁前 | 获取更新前的DOM状态 |
| | updated | 数据变化导致虚拟DOM重新渲染和打补丁后 | 操作更新后的DOM |
| 销毁阶段 | beforeDestroy (Vue 2) / beforeUnmount (Vue 3) | 实例销毁前 | 清理工作（如清除定时器、取消事件监听、取消未完成的网络请求） |
| | destroyed (Vue 2) / unmounted (Vue 3) | 实例销毁后 | 执行一些最终的清理工作，如通知外部系统组件已销毁 |
理解“生命周期”
“生命周期”指的是一个事物从创建、运行到销毁的整个过程。
在前端框架（如Vue、React）或一些系统中，这通常指的是一个组件或应用实例所经历的从初始化、挂载、更新到卸载的一系列阶段。
理解“钩子”
“钩子”是一种编程机制，允许在特定事件或时间点“挂载”或“注入”自己的代码。
可以把它想象成是框架在运行到某个特定时刻时，主动向你发出的一个“邀请”或“通知”，告诉你“我现在准备做某事了，你要不要趁这个机会做点什么？”。
生命周期钩子的核心价值
生命周期钩子的主要目的是让开发者有机会在对象生命周期的关键节点执行自己的代码，从而更好地控制对象的行为和管理资源。这使得开发者能够：
• 在合适的时机做合适的事：例如，在组件创建后（created）请求数据，在组件挂载后（mounted）操作DOM，在组件销毁前（beforeDestroy/beforeUnmount）清理资源以防止内存泄漏。
• 实现更灵活和精细的控制：通过在不同的生命周期阶段插入逻辑，可以更有效地管理组件的状态和行为。
一个简单的比喻
可以把组件的生命周期想象成人的一生：
• created -> 出生了，有了基本的身份信息（数据），但还无法与世界互动（DOM）。
• mounted -> 长大成人，正式步入社会，可以工作和创造价值（操作DOM）。
• updated -> 经历了一些事情，成长改变了。
• beforeDestroy/beforeUnmount -> 预感生命将至尽头，开始处理身后事，归还物品，告别朋友（清除定时器、解绑事件）。
• destroyed/unmounted -> 生命结束。
使用注意事项
• 避免在 beforeUpdate 或 updated 中更改状态，这可能引发无限循环更新。
• 异步操作需谨慎：在 mounted 等钩子中进行异步操作时，要考虑到组件可能在你得到异步响应之前就已经被销毁了。
• 理解父子组件生命周期顺序：对于父子组件，生命周期钩子的执行是有顺序的，例如在挂载阶段，顺序是：父 beforeMount -> 子 beforeMount -> 子 mounted -> 父 mounted。
其他系统中的生命周期钩子
生命周期钩子的概念并不仅限于Vue.js。在许多其他框架和系统中也存在类似的机制：
• React：有 componentDidMount, componentDidUpdate, componentWillUnmount 等生命周期方法（在类组件中），以及 useEffect Hook（在函数组件中）来实现类似功能。
• 鸿蒙系统：同样提供了丰富的生命周期钩子，例如对于UIAbility有 onCreate, onWindowStageCreate, onDestroy 等；对于页面组件有 aboutToAppear, aboutToDisappear 等，用于管理应用和组件的创建、显示、隐藏与销毁过程。
挂载的理解
理解“挂载”（Mounting），关键要明白它在不同领域有不同含义，但核心思想都是将某个对象“关联”或“安装”到另一个对象上，使其成为可用整体。
下面主要从计算机领域，尤其是文件系统和前端开发的角度梳理:
| 领域 挂载对象 | 挂载目标 | 核心目的 |
|---|---|---|
| 操作系统/文件系统 | 磁盘分区、外部存储设备 | 目录树中的空目录（挂载点） |
| Vue.js | Vue实例或组件 | DOM元素 |
| React | React组件 DOM树 | 渲染用户界面并管理组件状态 |
| 其他领域 | 车牌、装饰物、知识产权、证据 | 车辆、建筑物、他人、法律案件 |
看看这几个主要领域的挂载:
操作系统与文件系统挂载
在操作系统（如 Linux）中，“挂载”指将存储设备（如硬盘分区、U盘、光盘）的文件系统连接到目录树中的某个空目录（称为“挂载点”），从而能够访问设备中的数据。
• 为何需要挂载：Linux/Unix 系统中，“一切皆文件”，硬件设备也被视为文件。但设备文件（如 /dev/sda1）本身不包含数据，而是设备的入口。通过挂载，用户才能通过熟悉的目录路径访问设备中的文件和数据。
• 挂载点：通常是空目录。选择空目录是为了避免挂载后原有目录内容被隐藏。
• 挂载命令：在 Linux 中常用 mount 命令。
• 卸载：不再需要访问设备时，使用 umount 命令解除关联关系。
简单比喻
就像给家里增加一个储物柜（存储设备）。柜子本身不能直接放东西，你需要给它指定一个位置（挂载点，比如客厅角落），并把它固定在那里（挂载）。之后，你就可以通过“客厅角落的储物柜”来存取物品了。
前端框架中的挂载
在前端框架（如 Vue.js、React）中，“挂载”指将组件实例关联到真实的 DOM 元素上， 从而将组件渲染到页面中并建立交互联系。
Vue.js 中的挂载
在 Vue.js 中，挂载是将 Vue 实例关联到 DOM 元素的过程。
- 挂载方式：
• 自动挂载：创建 Vue 实例时通过 el 选项指定挂载点。
new Vue({
el: '#app', // 挂载到 id 为 app 的元素上
data: { message: 'Hello Vue!' }
})
• 手动挂载：创建实例时不指定 el，之后通过 $mount 方法挂载。
const vm = new Vue({ data: { message: 'Hello Vue!' } })
vm.$mount('#app') // 手动挂载
- 挂载过程的生命周期钩子：
• beforeMount：模板已编译，但尚未将虚拟 DOM 渲染为真实 DOM。
• mounted：实例已挂载到 DOM，可进行 DOM 操作或发送异步请求。
• 重要性：挂载后，Vue 的响应式系统开始工作，数据变化可驱动视图更新。
React 中的挂载
React 中，挂载是组件首次被渲染到 DOM 中的过程。
挂载过程的生命周期方法（类组件）：
• constructor：初始化 state 和绑定事件。
• static getDerivedStateFromProps：在渲染前根据 props 派生 state。
• render：返回需要渲染的 JSX 内容。
• componentDidMount：组件已挂载到 DOM，是进行副作用操作（如数据请求、订阅事件）的理想时机。
简单比喻
就像把一个电器（组件实例）插到电源（DOM 元素）上并打开开关（挂载），电器才开始工作（渲染和交互）。
其他领域的挂载
“挂载”一词在其他领域也表示“附加”或“关联”的概念：
• 车辆交通：将车牌、标志牌固定到车辆特定位置。
• 房地产建筑：将装饰物、灯具等固定到建筑物表面。
• 知识产权：将专利、商标等授权给他人使用。
• 法律证据：将文件或证据与特定案件关联。
核心思想
无论哪个领域，“挂载”的核心思想都是：建立一种连接或附属关系，使得被挂载的对象能够通过挂载目标被访问、使用或生效。
总结
到此这篇关于前端JS概念之钩子、生命周期及挂载的文章就介绍到这了,更多相关JS钩子、生命周期及挂载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！