1.組合式 API 和選項 API

Vue2 提供的編程方式是 Options API，即選項式 API。

我們需要在 data 里面定義變量，在 methods 里面定義方法，在 computed 定義計算后的邏輯。

圖片

在開發功能的時候，我們需要在 data 、methods、computed 之間來回找代碼。

如果功能非常復雜， data 、methods、computed 等里面的代碼就會非常長，不好維護。

圖片

后來 Vue3 出現了，它提供的編程方式是 Composition API，即組合式 API。

在開發功能的時候，我們根據邏輯功能去組織代碼，一個功能所定義的所有 API 會放在一起。

圖片

但是如果業務功能太復雜，script 標簽里面的代碼也會又臭又長，而且并不是很多人都有加注釋的習慣，所以時間長了也不好維護。

圖片

那能不能把相同邏輯功能的代碼分別放到到不同的文件里，其他地方想用的時候直接導入就可以復用了呢？

有的，自定義 Hooks 出現了。

2.自定義 Hooks 介紹

Vue 的自定義 Hooks 是一種封裝可重用邏輯的方式。它允許你將復雜的邏輯提取出來，形成獨立的函數，然后在不同的組件中復用。這樣可以避免在多個組件中重復編寫相同的邏輯，提高代碼的可讀性和可維護性。

通俗易懂來說就是：

1.將可復用的功能邏輯放到一個 js 文件里面，并通過 export  導出。

2.定義 Hooks 的時候，js 的文件名和方法名通常以 use 開頭，例如 useAddOrder、useChangeData。

3.通過 import  導入相關的 js 文件，引用時通過解構顯示相關的變量和方法。

接下來我們講一下自定義 Hooks 的案例，其實非常簡單。

3.自定義 Hooks 案例

3.1 案例1

創建一個簡單的計數器 Hooks

圖片

使用 Hooks

<template>
  <div>
    <p>count: {{ count }}</p>
    <el-divider></el-divider>
    <el-button type="primary" @click="increment">新增</el-button>
    <el-button type="success" @click="decrement">減少</el-button>
  </div>
</template>
<script setup>
// 導入 hooks
import { useCounter } from "../hooks/useCounter";
// 解構引入
const { count, increment, decrement } = useCounter();
</script>

圖片

3.2 案例2

創建一個監聽瀏覽器窗口大小變化的 Hooks

圖片

使用 Hooks

<template>
  <div>
     <p>瀏覽器窗口寬度: {{ width }}</p>
    <p>瀏覽器窗口高度: {{ height }}</p>
  </div>
</template>
<script setup>
// 導入 hooks
import { useWindowResize } from "../hooks/useWindowResize";
// 解構引入
const { width, height } = useWindowResize();
</script>

圖片

4.總結

所謂的自定義 Hooks 就是在開發 Vue3 項目時，我們將 script 里面相同邏輯功能的變量和方法等封裝到一個 js 文件里面，然后通過 export導出。

然后在任何頁面都可以通過導入、解構的方式使用，大大提高代碼的復用性。

自定義 Hooks 將相同的功能代碼從一堆代碼中解耦出來，讓組件結構更清晰，便于維護。

圖片

Hooks 直譯是“鉤子”，所以又把這些定義的 js 叫做鉤子函數。