Vue3官方Hooks的用法与实现原理

更新时间：2025年05月28日 08:26:59 作者：黑匣子~

Vue 3 引入了 Composition API,使得生命周期钩子（hooks）在函数式风格中更清晰地表达,下面就来介绍一下Vue3官方Hooks的用法与实现原理,感兴趣的可以了解一下

📘 1. Vue 3 官方生命周期 hooks 一览

Hook 函数	触发时机
onBeforeMount	组件挂载前
onMounted	组件挂载后
onBeforeUpdate	数据变更、视图更新前
onUpdated	数据变更、视图更新后
onBeforeUnmount	卸载前
onUnmounted	卸载后
onActivated	<KeepAlive> 激活时
onDeactivated	<KeepAlive> 失活时
onErrorCaptured	错误捕获
onRenderTracked	响应式依赖追踪
onRenderTriggered	响应式依赖触发更新

✅ 2. 使用示例

&lt;script setup&gt;
import { onMounted } from 'vue'

onMounted(() =&gt; {
  console.log('组件已挂载完成')
})
&lt;/script&gt;

在 <script setup> 中调用 hooks 更简洁，无需访问 setup() 返回对象。

🧠 3. 实现原理解析

生命周期 hooks 的注册基于当前组件实例 currentInstance：

export function onMounted(hook: Function, target = currentInstance) {
  return injectHook('mounted', hook, target)
}

核心函数 injectHook：

function injectHook(type: LifecycleHooks, hook: Function, target) {
  const hooks = target[type] || (target[type] = [])
  hooks.push(hook)
}

当组件进入对应生命周期阶段时，Vue 内部会遍历执行挂载在实例上的所有该类型 hook。

♻️ 4. 自定义 Hooks（组合逻辑复用）

Vue 3 鼓励将逻辑拆分为 useXxx 函数，以便跨组件复用。

🎯 示例：useWindowSize

// useWindowSize.ts
import { ref, onMounted, onUnmounted } from 'vue'

export function useWindowSize() {
  const width = ref(window.innerWidth)
  const height = ref(window.innerHeight)

  const update = () => {
    width.value = window.innerWidth
    height.value = window.innerHeight
  }

  onMounted(() => window.addEventListener('resize', update))
  onUnmounted(() => window.removeEventListener('resize', update))

  return { width, height }
}

使用方式：

<script setup>
import { useWindowSize } from '@/hooks/useWindowSize'

const { width, height } = useWindowSize()
</script>

🧠 自定义 hooks 的原理

本质是普通函数，内部调用 Vue 组合式 API（如 ref, watch, onMounted）
在组件 setup() 时执行，响应式变量挂接到当前组件上下文
内部调用生命周期钩子时会依赖当前的 getCurrentInstance()

📌 5. 总结对比

类型	示例	作用	特点
官方生命周期 Hook	onMounted()	注册生命周期回调	由 Vue 内部调度
自定义 Hook	useMousePosition()	封装响应式状态 + 逻辑复用	是普通函数，可组合嵌套

📚 推荐阅读

✍️ 结语

生命周期 hooks 是 Vue 3 中非常核心的机制之一。理解它们的用法与实现，有助于我们编写结构清晰、逻辑可复用的组件。

如果你对 Vue 源码感兴趣，不妨进一步探索 Vue 是如何依赖 currentInstance 来处理作用域钩子的注册和调用的。

到此这篇关于Vue3官方Hooks的用法与实现原理的文章就介绍到这了,更多相关Vue3 Hooks用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue命令式组件的编写与应用小结
这篇文章主要介绍了Vue命令式组件的编写与应用小结,在这篇文章中,我会带你了解命令式组件的基本概念,并通过一些简单的示例来展示它们是如何工作的,需要的朋友可以参考下
2024-03-03
vue3+ts使用Echarts的实例详解
这篇文章主要介绍了vue3+ts使用Echarts的实例详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
el-table 树形数据 tree-props 多层级使用避坑
本文主要介绍了el-table 树形数据 tree-props 多层级使用避坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-08-08
vue实现购物车选择功能
这篇文章主要为大家详细介绍了vue实现购物车选择功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
vue实现滚动底部加载下一页指令的示例代码
vue中监控滚动事件可以直接在mounted中绑定滚动事件,然后在销毁前解绑滚动事件,本文通过实例代码介绍vue实现滚动底部加载下一页指令的过程,感兴趣的朋友跟随小编一起看看吧
2023-10-10
vue项目npm install失败的问题解决方案
本文主要介绍了vue项目npm install失败的问题解决方案,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-01-01
Vue3全局组件注册的实现代码
在这篇文章中,我们将学习一下 Vue3 的全局组件注册是如何实现的,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2023-12-12
关于vue src路径动态拼接的小知识
这篇文章主要介绍了vue src路径动态拼接的小知识，具有很好的参考价值，希望对大家有所帮助。
2022-04-04
vue3中关于路由hash与History的设置
这篇文章主要介绍了vue3中关于路由hash与History的设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue实现echarts饼图/柱状图点击事件实例
echarts原生提供了相应的API,只需要在配置好echarts之后绑定相应的事件即可,下面这篇文章主要给大家介绍了关于vue实现echarts饼图/柱状图点击事件的相关资料,需要的朋友可以参考下
2023-06-06