vue3中的hooks使用

什么是hooks

不说什么复杂笼统的解释，其实说白了就是一个分装出去的功能函数。什么数据请求、逻辑处理、window监控等等，只要能抽出去的都可以作为一hooks是独立出来。

使用方法

建立

export const useHooks = ()  => {
  const num = ref<number>(0)
  
  onMounted(()=>{
    console.log(num.value)
  })
  
  const handleSet = (value: number) => {
    num.value = value
  }
  return {
    num,
    handleSet
  }
}
export default useHooks

看以上代码就能发现建立一个hooks非常简单，只要把数据和方法抽出来就行

使用

import useHooks from './useHooks'

const { num, handleSet } = useHooks()
onMounted(()=>{
  console.log('拿到了hooks里面的数据', num.value)
})

const onClick = () => {
  handleSet(1)
  console.log('对num进行了修改', num.value)
} 

引入使用，甚至能watch去监听hooks中的num

全局使用

既然会简单的使用了，那我们想个问题，怎么让其他组件也都能使用或监控hooks里面的数据和方法呢？ 假如我们其他地方都直接引入useHooks，那么很显然useHooks会被多次创建，里面的num肯定也不是那个公共的num。 那怎么才能实现多个组件使用但数据源仍然指向一个？方法很简单，使用provide 和 inject就能轻松解决，让我们稍微改动一下代码。

一、创建一个provide.vue

<template>
  <slot></slot>
</template>

<script setup lang="ts">

import {onMounted, provide} from "vue";
import { useHooks } from "./index";

const hooks = useHooks()
provide('hooks', useHooks)
</script>

二、给app.vue套上

<template>
  <Provide>
	  <div id="app">
	    <router-view />
	  </div>
  </Provide>
</template>

<script lang="ts" setup>
import Provide from "./provide.vue";
</script>

三、修改useHooks.ts

export const useHooks = ()  => {
  const num = ref<number>(0)
  
  onMounted(()=>{
    console.log(num.value)
  })
  
  const handleSet = (value: number) => {
    num.value = value
  }
  return {
    num,
    handleSet
  }
}
export const useDemoHooks = ()  => {
  const demoHooks = inject('hooks')
  if (!demoHooks) {
    throw new Error('demoHooks must be used within a component wrapped with provide.vue.');
  }
  return demoHooks;
}
export default useHooks

四、使用

import useDemoHooks from './useHooks'

const { num, handleSet } = useDemoHooks()
onMounted(()=>{
  console.log('拿到了hooks里面的数据', num.value)
})

const onClick = () => {
  handleSet(1)
  console.log('对num进行了修改', num.value)
} 

总结

hooks是抽离独立功能非常好的一种代码形式，高复用，低耦合。一个好的hooks能大大提高代码的可维护性和可读性，比如业务代码与逻辑代码分离，比如页面处理和数据请求分离等等。 当然如果乱用，不管什么都封装成hooks，那这个项目会急速趋向于垃圾代码，比如一个vue文件五六个自定义的hooks，随便查看个方法和数据就得去hooks找，然后hooks和hooks又是存在关联，突然某个值变化了都不知道是哪个hooks产生的变化。