Vue3-自定义Hooks

Vue3-自定义 Hooks

1. Hooks 定义

官方对自定义 hook 定义：在 Vue 应用的概念中，“组合式函数” (Composables) 是一个利用 Vue 组合式 API 来封装和复用有状态逻辑的函数。

其实 Hooks 本质是一个函数，把 setup 函数中使用的 Composition API 进行了封装。自定义 Hooks 可以复用代码, 让 setup 中的逻辑更清楚易懂。

2. Hooks 使用

用 Composition API 来创建一个可响应的计数器。

2.1. 创建 hooks 文件夹

在 src 中创建 hooks 文件夹，并在该文件夹创建 useCounter.js 文件。

2.2. 创建计数器

1. 首先，从vue库中导入reactive和toRefs函数。

2. 在useCounter函数中，我们使用reactive函数来创建一个响应式对象state，其中包含count属性和add和minus方法。count属性被初始化为 0，add方法增加count的值，minus方法减少count的值。

3. 接下来，我们使用toRefs函数将state对象转换为具有响应式引用形式的对象。这样，我们可以将state对象作为参数传递给 Vue 组件，并在模板中直接访问它的属性和方法。

4. 最后，我们返回toRefs(state)，这样在调用useCounter函数时，它将返回一个包含count、add和minus属性的对象，这些属性都是响应式的。

   import { reactive, toRefs } from "vue";
   
   export const useCounter = () => {
   	const state = reactive({
   		count: 0,
   		add() {
   			state.count++;
   		},
   		minus() {
   			state.count--;
   		},
   	});
   	return toRefs(state);
   };
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14

2.3. 创建 UseHooks 组件

导入useCounter函数，该函数是一个用于获取计数器状态的 Hook。useCounter函数返回一个对象，包含add、minus和count属性。我们将这些属性分别赋值给组件的add、minus和count属性。

<script setup>
	import {useCounter} from '../hooks/useCounter' const {(add, minus, count)} =
	useCounter() // console.log(count);
</script>
1
2
3
4

在<template>部分，我们定义了计数器的显示内容和两个按钮。其中一个按钮点击时会调用add方法，增加计数；另一个按钮点击时会调用minus方法，减少计数。

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="add">点我+1</button>
    <button @click="minus">点我-1</button>
  </div>
</template>
1
2
3
4
5
6
7

2.4. 显示组件

在 App 中显示子组件 UseHooks。

<template>
  <UseHooks />
</template>

<script setup>
import UseHooks from './components/UseHooks.vue';

</script>


<style scoped></style>

1
2
3
4
5
6
7
8
9
10
11
12

2.5. 演示效果

3. 完整代码

3.1. useCounter.js

import { reactive, toRefs } from "vue";

export const useCounter = () => {
	const state = reactive({
		count: 0,
		add() {
			state.count++;
		},
		minus() {
			state.count--;
		},
	});
	return toRefs(state);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.2. UseHooks.vue

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="add">点我+1</button>
    <button @click="minus">点我-1</button>
  </div>
</template>

<script setup>
import { useCounter } from '../hooks/useCounter'
const { add, minus, count } = useCounter()
// console.log(count);
</script>


<style scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.3. App.vue

<template>
  <UseHooks />
</template>

<script setup>
import UseHooks from './components/UseHooks.vue';

</script>


<style scoped></style>

1
2
3
4
5
6
7
8
9
10
11
12