Vue3+TS 自定义Hooks 揭秘，揭开Composition API 神秘面纱

前端

2024-01-03 20:30:02

Vue3+TS 定制Hooks详解

大家好，我是[你的名字]，一名技术博客创作专家。今天，我们一起来学习Vue3+TS自定义Hooks的知识。

一、Composition API 简介

Vue3借鉴React Hooks开发出了Composition API，它允许我们在组件中使用Hooks来管理状态和逻辑，而无需在组件选项中定义它们。这使得代码更具可读性和可重用性。

二、自定义Hooks

自定义Hooks是我们可以自己编写的Hooks，它允许我们在组件中重用逻辑。我们可以通过两种方式来创建自定义Hooks：

使用 use 前缀创建函数，如 useMyHook()
使用 export 导出一个函数，如 export function useMyHook()

三、案例演示

下面，我们通过一个例子来演示如何使用自定义Hooks。我们创建一个名为 useCounter 的自定义Hook，它可以用于管理计数器状态：

export function useCounter() {
  const count = ref(0)
  const increment = () => {
    count.value++
  }
  const decrement = () => {
    count.value--
  }
  return {
    count,
    increment,
    decrement
  }
}

然后，我们可以在组件中使用这个自定义Hooks：

<template>
  <div>
    <button @click="increment">+</button>
    <span>{{ count }}</span>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment, decrement } = useCounter()
    return {
      count,
      increment,
      decrement
    }
  }
}
</script>