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

一、什么是hooks

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

二、hooks使用规范

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

三、hooks函数的封装与使用

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

js 复制代码
<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函数示例:

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

useJob.ts函数示例:

js 复制代码
import {reactive} from 'vue'

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

}

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

js 复制代码
<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 将碎片化的响应式变量和方法按功能分块写,实现高内聚低耦合。

相关推荐
excel3 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel4 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼6 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping6 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙7 小时前
[译] Composition in CSS
前端·css
白水清风7 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix7 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278007 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端7 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧7 小时前
Promise 的使用
前端·javascript