一、什么是hooks
vue3 中的 hooks 就是函数的一种写法,就是将文件的一些单独功能的 js 代码进行抽离出来进行封装使用。它的主要作用是 Vue3 借鉴了 React 的一种机制,用于在函数组件中共享状态逻辑和副作用,从而实现代码的可复用性。
二、hooks使用规范
- 具备可复用功能,才需要抽离为 hooks 独立文件;
- 函数名/文件名以 use 开头,形如: useXX;
- 引用时将响应式变量或者方法显式解构暴露出来;
三、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 将碎片化的响应式变量和方法按功能分块写,实现高内聚低耦合。