Vue3第十三天，Vue3种如何自定义hook

张志鹏PHP全栈2025-08-11 10:41

Hook概念在React中特别常用，Vue3中将他的设计Hook的思想运用过来了，有人调侃的就说，javascript的发展史就是从面向过程->面向对象->面向过程。哈哈哈，实用才是最合适的。Hook里面将定义好多复用的方法或者变量。这靠我们在实践中多理解和使用才能更深入的了解设计Hook的初衷。类似于vue2.x中的mixin。

useSum.ts中内容如下：

javascript 复制代码

import {ref,onMounted} from 'vue'

export default function(){
  let sum = ref(0)

  const increment = ()=>{
    sum.value += 1
  }
  const decrement = ()=>{
    sum.value -= 1
  }
  onMounted(()=>{
    increment()
  })

  //向外部暴露数据
  return {sum,increment,decrement}
}

useDog.ts中内容如下:

javascript 复制代码

import {reactive,onMounted} from 'vue'
import axios,{AxiosError} from 'axios'

export default function(){
  let dogList = reactive<string[]>([])

  // 方法
  async function getDog(){
    try {
      // 发请求
      let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
      // 维护数据
      dogList.push(data.message)
    } catch (error) {
      // 处理错误
      const err = <AxiosError>error
      console.log(err.message)
    }
  }

  // 挂载钩子
  onMounted(()=>{
    getDog()
  })
	
  //向外部暴露数据
  return {dogList,getDog}
}

组件中具体使用：

xml 复制代码

<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="increment">点我+1</button>
  <button @click="decrement">点我-1</button>
  <hr>
  <img v-for="(u,index) in dogList.urlList" :key="index" :src="(u as string)"> 
  <span v-show="dogList.isLoading">加载中......</span><br>
  <button @click="getDog">再来一只狗</button>
</template>

<script lang="ts">
  import {defineComponent} from 'vue'

  export default defineComponent({
    name:'App',
  })
</script>

<script setup lang="ts">
  import useSum from './hooks/useSum'
  import useDog from './hooks/useDog'
	
  let {sum,increment,decrement} = useSum()
  let {dogList,getDog} = useDog()
</script>

上面组件中的使用，是不是看起来一目了然，将来如果还要使用求和方法和属性的话，直接调用Hook函数就行，不是少了很多重复代码。

感谢大家观看