vue3 组合式函数使用

组合式函数

官方文档

在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

封装一些通用逻辑，并且可以使用 vue 中的 api

约定

命名

组合式函数约定用驼峰命名法命名，并以“use”作为开头。

输入参数

处理一下输入参数是 ref 或 getter 而非原始值的情况。可以利用 toValue() 工具函数来实现：

import { toValue } from "vue";

export function useTest(params) {
	const val = toValue(params);
}

使用限制

组合式函数只能在 <script setup> 或 setup() 钩子中被调用。在这些上下文中，它们也只能被同步调用。在某些情况下，你也可以在像 onMounted() 这样的生命周期钩子中调用它们。

基本使用

src/hooks/useTest/index.ts

import { ref } from "vue";

export function useTest() {
	const num = ref(1);

	function add(n: number) {
		num.value += n;
	}

	return {
		num,
		add,
	};
}

.vue 文件使用

<template>
	<div>num---{{ num }}</div>

	<div @click="add(3)">add</div>
</template>

组合式函数的参数

实现发送验证码倒计时

import { ref, toValue } from "vue";

export function useTest(allTime: number = 60) {
	let timerId: number | undefined = undefined;

	const time = ref(toValue(allTime));

	function send() {
		if (timerId) return;
		timerId = setInterval(() => {
			time.value -= 1;

			if (time.value <= 0) {
				time.value = allTime;
				clearInterval(timerId);
				timerId = undefined;
			}
		}, 1000);
	}

	return { send, time };
}

使用

<script lang="ts" setup>
import { useTest } from "@/hooks/useTest";
const { time, send } = useTest(16);
// const { time, send } = useTest();
</script>

<template>
	<h2 @click="send">倒计时：{{ time }}</h2>
</template>