vue3中hooks用法详解
一、什么是hooks?
hook
是钩子的意思,看到“钩子”是不是就想到了钩子函数?事实上,hooks
还真是函数的一种写法。
vue3
借鉴 react hooks
开发出了 Composition API
,所以也就意味着 Composition API
也能进行自定义封装 hooks
。
vue3
中的 hooks
就是函数的一种写法,就是将文件的一些单独功能的js
代码进行抽离出来,放到单独的js
文件中,或者说是一些可以复用的公共方法/功能。其实 hooks
和 vue2
中的 mixin
有点类似,但是相对 mixins
而言, hooks
更清楚复用功能代码的来源, 更清晰易懂。
二、hooks基本用法
- 在
src
中创建一个hooks
文件夹,用来存放hook
文件; - 在
hooks
文件下创建useCount.js
文件(一般使用use
开头);
import {
ref } from 'vue'
export default function() {
const count=ref(0);
const increment = () => {
count.value++;
}
const decrement = () => {
count.value--;
}
// 把方法和数据返回出去
return {
count,
increment,
decrement
}
}
- 在用到的文件中引入
useCount.js
;
<script setup>
//引入hooks文件
import useCount from "../hooks/useCount"
// 导入
const {
count, increment, decrement } = useCount()
</script>
三、hooks优点
- hooks 作为独立逻辑的组件封装,其内部的属性、函数等和外部组件具有响应式依附的作用。
- 自定义 hook 的作用类似于 vue2 中的 mixin 技术,使用方便,易于上手。
- 使用 Vue3 的组合 API 封装的可复用,高内聚低耦合。
四、hooks和utils区别
相同点:
- 通过 hooks 和 utils 函数封装, 可以实现组件间共享和复用,提高代码的可重用性和可维护性。
异同点:
-
表现形式不同:hooks 是在 utils 的基础上再包一层组件级别的东西(钩子函数等);utils
一般用于封装相应的逻辑函数,没有组件的东西; -
数据是否具有响应式:hooks 中如果涉及到 ref,reactive,computed 这些 api 的数据,是具有响应式的;而 utils 只是单纯提取公共方法就不具备响应式;
-
作用范围不同:hooks 封装,可以将组件的状态和生命周期方法提取出来,并在多个组件之间共享和重用;utils 通常是指一些辅助函数或工具方法,用于实现一些常见的操作或提供特定功能。
总结&