vue3中hooks用法详解

一、什么是hooks？

hook是钩子的意思，看到“钩子”是不是就想到了钩子函数？事实上，hooks 还真是函数的一种写法。

vue3 借鉴 react hooks 开发出了 Composition API ，所以也就意味着 Composition API 也能进行自定义封装 hooks。

vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能。其实 hooks 和 vue2 中的 mixin 有点类似，但是相对 mixins 而言， hooks 更清楚复用功能代码的来源, 更清晰易懂。

二、hooks基本用法

1. 在src中创建一个hooks文件夹，用来存放hook文件；
2. 在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
	}
}

3. 在用到的文件中引入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