vue3中自定义hooks函数的封装与使用（最简单的例子）

一、什么是hooks

vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的 js 代码进行抽离出来进行封装使用。它的主要作用是 Vue3 借鉴了 React 的一种机制，用于在函数组件中共享状态逻辑和副作用，从而实现代码的可复用性。

二、hooks使用规范

1. 具备可复用功能，才需要抽离为 hooks 独立文件；
2. 函数名/文件名以 use 开头，形如: useXX；
3. 引用时将响应式变量或者方法显式解构暴露出来；

三、hooks函数的封装与使用

1. 举例一个不使用hooks函数的简单页面（后面会拆分）

<template>
  <div>
   <h1>找对象</h1>
	<h2>姓名： {{ person.name }}</h2> <br>
	<h2>年龄： {{ person.age }}</h2> <br>
	<button @click="changeAge">修改年龄</button>

	<h1>找工作</h1>
	<h2>职业： {{ job.name }}</h2> <br>
	<h2>年薪： {{ job.salary }}W</h2> <br>
	<button @click="changeSalary">修改年薪</button>
 </div>
</template>
<script setup lang="ts">
import { reactive} from 'vue'
	
//找对象相关数据
let person = reactive({
	name: '胡歌',
	age: 20
})
//找对象相关方法
function changeAge() {
	person.age += 3
}
//找工作相关数据
let job = reactive({
	name: '前端开发工程师',
	salary: 8
})
//找工作相关方法
function changeSalary() {
	job.salary += 1
}
</script>

上述代码定义了「找对象」和「找工作」两种不同类型的数据和方法，都放在一个脚本下，眼花缭乱，如果我项目中还有地方用到「找工作」数据与方法，就不太好抽离出来，也不方便后期维护，此时，hooks站起来说：我来把它们分开！

2.hooks函数的封装

在src下新建一个hooks文件夹，在hooks文件夹下面新建两个hooks文件，一个命名为usePerson.ts,另一个叫useJob.ts

将「找对象」数据方法全部写在usePerson.ts函数中，「找工作」数据方法全部写在useJob.ts函数中 。

usePerson.ts函数示例：

import { reactive} from 'vue'
export default function () {
	//找对象相关数据
	let person = reactive({
		name: '胡歌',
		age: 20
	})
	//找对象相关方法
	function changeAge() {
		person.age += 3
	}
	return {
		person, 
		changeAge
	}
}

useJob.ts函数示例：

import {reactive} from 'vue'

export default function () {
		//找工作相关数据
	let job = reactive({
		name: '前端开发工程师',
		salary: 8
	})
	//找工作相关方法
	function changeSalary() {
		job.salary += 1
	}
	return {
		job, 
		changeSalary
	}

}

此时，在主页面中调用这俩函数，那么页面将变成：

<template>
	<div>
		<h1>找对象</h1>
		<h2>姓名： {{ person.name }}</h2> <br>
		<h2>年龄： {{ person.age }}</h2> <br>
		<button @click="changeAge">修改年龄</button>

		<h1>找工作</h1>
		<h2>职业： {{ job.name }}</h2> <br>
		<h2>年薪： {{ job.salary }}W</h2> <br>
		<button @click="changeSalary">修改年薪</button>
	</div>
</template>
<script setup lang="ts">

import usePerson from '@/hooks/usePerson'
import useJob from '@/hooks/useJob'


const {person, changeAge} = usePerson()
const {job, changeSalary} =useJob()

</script>

自定义两个hooks函数引入，这样对应的数据和方法就在对应的ts脚本中，方便后期维护，值得提一句的是，hooks函数也有自己的生命周期，与vue3生命周期相同。

四、总结

Vue3 时代 Composition Api，通过利用各种 Hooks 和自定义 Hooks 将碎片化的响应式变量和方法按功能分块写，实现高内聚低耦合。