快捷導(dǎo)航

Vue3官方Hooks的用法與實(shí)現(xiàn)原理

更新時(shí)間：2025年05月28日 08:26:59 作者：黑匣子~

Vue 3 引入了 Composition API,使得生命周期鉤子（hooks）在函數(shù)式風(fēng)格中更清晰地表達(dá),下面就來介紹一下Vue3官方Hooks的用法與實(shí)現(xiàn)原理,感興趣的可以了解一下

Vue 3 引入了 Composition API，使得生命周期鉤子（hooks）在函數(shù)式風(fēng)格中更清晰地表達(dá)。本篇文章將從官方 hooks 的使用、實(shí)現(xiàn)原理以及自定義 hooks 的結(jié)構(gòu)化思路出發(fā)，全面理解 Vue 3 的 hooks 系統(tǒng)。

?? 1. Vue 3 官方生命周期 hooks 一覽

Hook 函數(shù)	觸發(fā)時(shí)機(jī)
onBeforeMount	組件掛載前
onMounted	組件掛載后
onBeforeUpdate	數(shù)據(jù)變更、視圖更新前
onUpdated	數(shù)據(jù)變更、視圖更新后
onBeforeUnmount	卸載前
onUnmounted	卸載后
onActivated	<KeepAlive> 激活時(shí)
onDeactivated	<KeepAlive> 失活時(shí)
onErrorCaptured	錯(cuò)誤捕獲
onRenderTracked	響應(yīng)式依賴追蹤
onRenderTriggered	響應(yīng)式依賴觸發(fā)更新

? 2. 使用示例

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

onMounted(() =&gt; {
  console.log('組件已掛載完成')
})
&lt;/script&gt;

在 <script setup> 中調(diào)用 hooks 更簡潔，無需訪問 setup() 返回對(duì)象。

?? 3. 實(shí)現(xiàn)原理解析

生命周期 hooks 的注冊(cè)基于當(dāng)前組件實(shí)例 currentInstance：

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

核心函數(shù) injectHook：

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

當(dāng)組件進(jìn)入對(duì)應(yīng)生命周期階段時(shí)，Vue 內(nèi)部會(huì)遍歷執(zhí)行掛載在實(shí)例上的所有該類型 hook。

?? 4. 自定義 Hooks（組合邏輯復(fù)用）

Vue 3 鼓勵(lì)將邏輯拆分為 useXxx 函數(shù)，以便跨組件復(fù)用。

?? 示例：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 的原理

本質(zhì)是普通函數(shù)，內(nèi)部調(diào)用 Vue 組合式 API（如 ref, watch, onMounted）
在組件 setup() 時(shí)執(zhí)行，響應(yīng)式變量掛接到當(dāng)前組件上下文
內(nèi)部調(diào)用生命周期鉤子時(shí)會(huì)依賴當(dāng)前的 getCurrentInstance()

?? 5. 總結(jié)對(duì)比

類型	示例	作用	特點(diǎn)
官方生命周期 Hook	onMounted()	注冊(cè)生命周期回調(diào)	由 Vue 內(nèi)部調(diào)度
自定義 Hook	useMousePosition()	封裝響應(yīng)式狀態(tài) + 邏輯復(fù)用	是普通函數(shù)，可組合嵌套