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

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

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

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

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

? 2. 使用示例

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

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

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

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

生命周期 hooks 的注冊基于當前組件實例 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)
}

當組件進入對應生命周期階段時，Vue 內部會遍歷執(zhí)行掛載在實例上的所有該類型 hook。

?? 4. 自定義 Hooks（組合邏輯復用）

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

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

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

?? 5. 總結對比

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