Hooks

一组实用的工具函数集合，用于简化开发流程、提升开发效率。它们提供了组件引用管理、缓存控制等常用功能的封装，让开发者能够以更简洁的方式实现复杂的功能需求。

useRefs

便捷的组件实例管理工具，用于快速获取和操作组件引用。

API

方法名	参数	返回值	说明
data	-	object	存储所有 ref 的响应式对象
set	name: string	function	生成 ref 绑定函数，用于在模板中设置组件引用
get	name: string	ComponentPublicInstance | null	获取指定名称的组件实例
getExposed<T>	name: string, key: string	T | null	获取组件实例通过 defineExpose 暴露的属性
call<T>	name: string, method: string	T	调用组件实例暴露的方法并返回结果
callMethod	name: string, method: string	void	调用组件实例暴露的方法，无返回值
open	name: string	void	调用组件的 open 方法
close	name: string	void	调用组件的 close 方法

使用示例

<template>
	<test-component :ref="refs.set('test')"></test-component>

	<button @click="get">获取数据</button>
</template>

<script lang="ts" setup>
	import { useRefs } from "@/.cool";

	const refs = useRefs();

	// 获取组件数据
	function get() {
		// 获取组件实例
		const testInstance = refs.get("test");

		// 获取组件暴露的属性
		const num = refs.getExposed("test", "num");

		// 调用组件方法并获取返回值
		const result = refs.call("test", "getData");

		// 调用组件方法，无返回值
		refs.callMethod("test", "updateStatus");
	}
</script>

useCache

智能组件重新渲染工具，通过监听依赖变化自动更新组件的 key 值。

使用场景

• 当组件需要根据特定状态完全重新渲染时
• 重置组件内部状态到初始值
• 强制刷新复杂的子组件

使用示例

<template>
	<complex-component :key="cache.key" :data="formData"></complex-component>

	<button @click="toggleStatus">切换状态</button>
	<button @click="incrementNum">增加数字</button>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { useCache } from "@/.cool";

	const status = ref(false);
	const num = ref(0);
	const formData = ref({});

	// 监听 status 和 num 的变化，自动生成新的 key
	const { cache } = useCache(() => [status.value, num.value]);

	function toggleStatus() {
		status.value = !status.value;
		// 组件会自动重新渲染
	}

	function incrementNum() {
		num.value++;
		// 组件会自动重新渲染
	}
</script>

useLongPress

长按手势处理工具，支持自定义触发间隔和回调函数。

特性

• 支持自定义长按触发间隔
• 自动处理触摸事件的开始和结束
• 支持连续触发回调

使用示例

<template>
	<view @touchstart="handleTouchStart" @touchend="longPress.stop" @touchcancel="longPress.stop">
		长按我试试
	</view>

	<view>计数: {{ count }}</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { useLongPress } from "@/.cool";

	const longPress = useLongPress();
	const count = ref(0);

	function handleTouchStart() {
		longPress.start(() => {
			// 每100ms执行一次，实现连续递增效果
			count.value++;
			console.log("长按触发", count.value);
		}, 100); // 可选：自定义触发间隔，默认100ms
	}
</script>