vue3自定义hooks

Vue3中，自定义Hooks是通过`provide`和`inject`实现的。`provide`和`inject`可以让我们在父组件中提供一些数据或函数，然后在子组件中使用`inject`来注入这些数据或函数。

下面是一个示例，演示如何在Vue 3中实现自定义Hooks：

import { provide, inject, reactive } from 'vue'

// 在父组件中提供一个名为useCount的Hooks
const useCount = () => {
  const state = reactive({ count: 0 })

  const increment = () => {
    state.count++
  }

  return {
    state,
    increment
  }
}

export default {
  setup() {
    provide('useCount', useCount) // 在provide中提供useCount
  }
}

// 在子组件中使用inject来使用useCount
import { inject } from 'vue'

export default {
  setup() {
    const { state, increment } = inject('useCount') // 使用inject来注入useCount

    return {
      state,
      increment
    }
  }
}

在上面的代码中，我们首先在父组件中定义了一个名为`useCount`的Hooks，然后在父组件的`setup`函数中使用`provide`来提供这个Hooks。在子组件中，我们使用`inject`来注入这个Hooks，并使用它提供的`state`和`increment`。这样，我们就实现了一个简单的自定义Hooks。

需要注意的是，`provide`和`inject`并不是完全等价于React中的Hooks。在Vue 3中，Hooks主要用于代码组合，而不是状态管理。如果你需要实现复杂的状态管理逻辑，建议使用Vuex或其他状态管理库。