Vue3 Hook 实践指南

訾博ZiBo

发布于 2025-01-06 19:28:39

12400

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

Vue3 Hook 实践指南

1. 概述

Vue3 的 Composition API 提供了一种新的方式来组织和管理组件中的状态和行为。

2. 重构状态逻辑

我们可以将组件中的状态逻辑，拆分为可复用的 Hook 函数。

import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)

  function increment() {
    count.value++
  }

  return { count, increment }
}

3. 管理副作用

我们可以使用 Hook 来管理组件中的副作用，包括异步请求、定时器、事件监听等。

import { ref, onMounted, onBeforeUnmount } from 'vue'

export function useTimer() {
  const count = ref(0)
  let timer

  function startTimer() {
    timer = setInterval(() => {
      count.value++
    }, 1000)
  }

  function stopTimer() {
    clearInterval(timer)
  }

  onMounted(() => {
    startTimer()
  })

  onBeforeUnmount(() => {
    stopTimer()
  })

  return { count }
}