定義

• 什么是hook？—— 本質是一個函數，把setup函數中使用的Composition API進行了封裝，類似于vue2.x中的mixin。

• 自定義hook的優勢：復用代碼, 讓setup中的邏輯更清楚易懂。

示例代碼

useSum.ts中內容如下：

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`中內容如下：

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>errorconsole.log(err.message)}}// 掛載鉤子onMounted(()=>{getDog()})//向外部暴露數據return {dogList,getDog}
}

組件中具體使用：

<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>